/* VIETDESK VET global font standardization.
   Browser automatically chooses the best Vietnamese/English font per device:
   iOS/macOS: Apple system font; Android: Roboto/Noto Sans; Windows: Segoe UI; Linux: Noto/Liberation/Arial. */
:root {
    --vds-app-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
    --vds-print-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Arial, "Liberation Sans", sans-serif;
}
html, body, button, input, select, textarea,
.app-shell, .app-topbar, .sidebar, .content-shell,
.modal, .dropdown-menu, .offcanvas, .popover, .tooltip {
    font-family: var(--vds-app-font) !important;
}

:root {
    --topbar-h: 56px;
    --tabbar-h: 0px;
    --bg: #f6f8fb;
    --card: #ffffff;
    --text: #0f172a;
    --muted: #64748b;
    --line: #e5e7eb;
    --blue: #2c7be5;

    
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 18px;
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 1px rgba(15, 23, 42, .04);
    --shadow-md: 0 10px 25px rgba(15, 23, 42, .10);
    --ring: 0 0 0 .25rem rgba(44, 123, 229, .18);
    --vds-modal-z: 120200;
    --vds-modal-backdrop-z: 120150;
    --vds-modal-safe-top: calc(var(--topbar-h) + env(safe-area-inset-top) + 16px);
    --vds-modal-safe-bottom: calc(env(safe-area-inset-bottom) + 12px);
}

.app-body {
    background: var(--bg);
    color: var(--text);
    font-family:var(--vds-app-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji");
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.app-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 5000;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: calc(10px + env(safe-area-inset-top)) 14px 10px;
    background:
        radial-gradient(circle at 12% 20%, rgba(59, 130, 246, .10), transparent 28%),
        radial-gradient(circle at 76% 10%, rgba(20, 184, 166, .12), transparent 26%),
        linear-gradient(135deg, rgba(255,255,255,.96), rgba(248,250,252,.94));
    border-bottom: 1px solid rgba(191, 219, 254, .80);
    box-shadow: 0 10px 28px rgba(15, 23, 42, .06);
    height: calc(var(--topbar-h) + env(safe-area-inset-top));
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}


.app-topbar-menu-btn {
    position: relative;
    touch-action: manipulation;
}


@media (max-width: 991.98px) {
    .app-topbar {
        z-index: 110000;
    }

    .app-topbar-menu-btn {
        z-index: 110003;
        pointer-events: auto !important;
    }

    #sideMenu.offcanvas,
    .offcanvas.offcanvas-start {
        z-index: 110002 !important;
    }

    .offcanvas-backdrop {
        z-index: 110001 !important;
    }
}

.app-title {
    position: relative;
    display: inline-flex;
    align-items: center;
    max-width: min(70vw, 760px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family:var(--vds-app-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji");
    font-weight: 900;
    font-size: 14px;
    line-height: 1.2;
    letter-spacing: .15px;
    color: #0f766e;
    background: linear-gradient(90deg, #0f766e 0%, #2563eb 35%, #7c3aed 65%, #0f766e 100%);
    background-size: 260% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: vdsTopbarTitleGradient 5.5s ease-in-out infinite;
    text-shadow: 0 10px 24px rgba(37, 99, 235, .13);
}

.app-title::after {
    content: "";
    position: absolute;
    inset: -6px -18px;
    background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,.72) 46%, transparent 58%);
    transform: translateX(-120%);
    animation: vdsTopbarTitleShine 3.8s ease-in-out infinite;
    pointer-events: none;
}

@keyframes vdsTopbarTitleGradient {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes vdsTopbarTitleShine {
    0% { transform: translateX(-120%); opacity: 0; }
    18% { opacity: .75; }
    42% { transform: translateX(120%); opacity: 0; }
    100% { transform: translateX(120%); opacity: 0; }
}

@media (min-width:992px) {
    .app-title {
        font-size: 16.5px;
        letter-spacing: .25px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-title,
    .app-title::after {
        animation: none;
    }
}


.app-user {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
}

.app-user-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
    min-width: 0;
}

.app-user-name {
    font-weight: 700;
    color: #334155;
    white-space: nowrap;
}

.app-user-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: .45rem .8rem;
    font-weight: 700;
    font-size: .9rem;
    line-height: 1;
    border: 1px solid transparent;
    white-space: nowrap;
}

.app-user-badge--role {
    color: #4f46e5;
    background: #eef2ff;
    border-color: #c7d2fe;
}

.app-user-badge--branch {
    color: #0f766e;
    background: #ecfeff;
    border-color: #99f6e4;
}

.app-user-badge--branch-subbranch-active {
    color: #dc2626 !important;
    background: #fff1f2;
    border-color: #fecdd3;
}

.app-shell {
    display: grid;
    grid-template-columns: 250px 1fr;
    
    padding-top: calc(var(--topbar-h) + env(safe-area-inset-top));
    min-height: calc(100vh - var(--topbar-h));
}


.app-shell--single {
    grid-template-columns: 1fr;
}

.app-sidebar {
    background: #fff;
    border-right: 1px solid var(--line);
    padding: 12px;
}

.app-main {
    padding: 12px;
    
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - var(--topbar-h) - env(safe-area-inset-top));
}


.app-content {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}



@media (min-width: 992px) {
    
    .app-content {
        width: 100%;
        max-width: var(--vds-content-max, 1360px);
        margin-left: auto;
        margin-right: auto;
    }

    .app-shell--single .app-content {
        width: 100%;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
    }
}




@media (min-width: 1200px) and (max-width: 1399.98px) {
    :root { --vds-content-max: 1220px; }
    .app-content { padding-left: 12px !important; padding-right: 12px !important; }
    .btn { font-size: .95rem; }
    .form-control, .form-select { font-size: .95rem; }
    .table > :not(caption) > * > * { padding: .55rem .65rem; }
}


@media (min-width: 1400px) and (max-width: 1599.98px) {
    :root { --vds-content-max: 1340px; }
    .table > :not(caption) > * > * { padding: .6rem .75rem; }
}


@media (min-width: 1600px) and (max-width: 1919.98px) {
    :root { --vds-content-max: 1480px; }
}


@media (min-width: 1920px) and (max-width: 2199.98px) {
    :root { --vds-content-max: 1580px; }
}


@media (min-width: 2200px) {
    :root { --vds-content-max: 1680px; }
}






@media (min-width: 768px) and (max-width: 991.98px) {
    .app-content {
        width: 100%;
        max-width: 820px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
}


@media (min-width: 576px) and (max-width: 767.98px) {
    .app-content {
        width: 100%;
        max-width: 640px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}


@media (max-width: 575.98px) {
    .app-content {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    
    body { font-size: 14.5px; }
    .btn { font-size: .95rem; }
    .form-control, .form-select { font-size: .95rem; }

    
    .app-title { font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .app-user .badge { display: none; }
}



@media (max-width:991px) {
    .app-main {
        padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
    }
}


@media (max-width:575.98px) {
    .btn {
        --bs-btn-padding-y: .55rem;
        --bs-btn-padding-x: .9rem;
        border-radius: 12px;
    }
    .form-control,
    .form-select {
        min-height: 44px;
        border-radius: 12px;
    }
    .input-group > .form-control,
    .input-group > .form-select,
    .input-group > .btn {
        min-height: 44px;
    }
    .dropdown-menu {
        border-radius: 14px;
    }
}


@media (max-width:575.98px) {
    .modal-dialog {
        margin: 0;
        max-width: 100%;
        width: 100%;
        height: 100%;
    }
    .modal-content {
        border-radius: 0;
        min-height: 100%;
    }
    .modal-body {
        -webkit-overflow-scrolling: touch;
    }
}


.table-responsive thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #fff;
}


.app-tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1035;
    height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--line);
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
}




html, body { height: 100%; }
body {
    font-family:var(--vds-app-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji");
    line-height: 1.45;
}

h1, h2, h3, h4, h5 { letter-spacing: -0.2px; }
h1 { font-size: clamp(20px, 2.2vw, 28px); font-weight: 800; }
h2 { font-size: clamp(18px, 1.8vw, 24px); font-weight: 800; }
h3 { font-size: clamp(16px, 1.6vw, 20px); font-weight: 800; }


.app-main {
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
}
@media (max-width: 991.98px){
    .app-main { padding-bottom: calc(var(--tabbar-h) + 16px + env(safe-area-inset-bottom)); }
}


.card {
    border-radius: var(--radius-lg);
    border: 1px solid var(--line) !important;
    box-shadow: var(--shadow-sm);
    transition: transform .14s ease, box-shadow .14s ease;
}
.card:hover{ box-shadow: var(--shadow-md); }
.card .card-header {
    background: #fff;
    border-bottom: 1px solid var(--line);
}
.card-header:first-child { border-top-left-radius: var(--radius-lg); border-top-right-radius: var(--radius-lg); }
.card-footer:last-child { border-bottom-left-radius: var(--radius-lg); border-bottom-right-radius: var(--radius-lg); }


.btn {
    border-radius: var(--radius-md);
    font-weight: 650;
    letter-spacing: .1px;
    transition: transform .06s ease, filter .14s ease, box-shadow .14s ease;
}
.btn:active{ transform: translateY(1px); }
.btn:focus, .btn:focus-visible { box-shadow: var(--ring) !important; }
.btn-sm { border-radius: var(--radius-sm); }


@media (max-width: 991.98px){
    .btn, .form-control, .form-select, .input-group-text {
        min-height: 44px;
    }
    .btn-sm, .form-control-sm, .form-select-sm, .input-group-sm > .input-group-text {
        min-height: 40px;
    }
}


.form-control, .form-select {
    border-radius: var(--radius-md);
    border-color: var(--line);
    background-clip: padding-box;
}
.form-control:focus, .form-select:focus {
    border-color: rgba(44, 123, 229, .55);
    box-shadow: var(--ring);
}
.input-group-text {
    border-radius: var(--radius-md);
    border-color: var(--line);
    background: #fff;
    color: var(--muted);
    font-weight: 650;
}
.input-group > :first-child { border-top-left-radius: var(--radius-md) !important; border-bottom-left-radius: var(--radius-md) !important; }
.input-group > :last-child { border-top-right-radius: var(--radius-md) !important; border-bottom-right-radius: var(--radius-md) !important; }


.table {
    --bs-table-border-color: var(--line);
}
.table thead th {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #334155;
}
.table td, .table th { vertical-align: middle; }

.table-responsive {
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-lg);
}

.table-responsive thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #f8fafc;
}


.table-hover > tbody > tr:hover > * { background-color: rgba(44,123,229,.06); }


@media (min-width: 992px){
    .table > :not(caption) > * > * { padding-top: .55rem; padding-bottom: .55rem; }
}

@media (prefers-reduced-motion: reduce){
    .card, .btn { transition: none !important; }
}
@media (max-width: 991.98px){
    .table > :not(caption) > * > * { padding-top: .7rem; padding-bottom: .7rem; }
}


.alert {
    border-radius: var(--radius-lg);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
}


.offcanvas {
    border-top-right-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
}


@media (max-width: 575.98px){
    .modal .modal-dialog { margin: 0; max-width: 100%; height: 100%; }
    .modal .modal-content { height: 100%; border-radius: 0; }
    .modal .modal-body { overflow: auto; -webkit-overflow-scrolling: touch; }
}


.text-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    z-index: 5001;
}


.vds-page-title {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom: 12px;
}
.vds-page-title .title { font-weight: 850; }
.vds-page-title .actions { display:flex; flex-wrap:wrap; gap:10px; }


.vds-toolbar,
.filter-bar,
.search-bar,
.actions-bar {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    align-items:center;
}


@media (min-width: 992px){
    *::-webkit-scrollbar { width: 10px; height: 10px; }
    *::-webkit-scrollbar-thumb { background: rgba(100,116,139,.35); border-radius: 999px; border: 2px solid rgba(255,255,255,.6); }
    *::-webkit-scrollbar-thumb:hover { background: rgba(100,116,139,.55); }
}

.app-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 6px 6px;
    border-radius: 14px;
    text-decoration: none;
    color: var(--muted);
    font-weight: 700;
    font-size: 11px;
    border: 1px solid transparent;
    background: transparent;
}

.app-tab i {
    font-size: 18px;
    line-height: 1;
}

.app-tab.active {
    color: var(--text);
    background: #f1f5f9;
    border-color: #e2e8f0;
}

.app-tab--btn {
    width: 100%;
    border: 0;
}


@media (max-width:991px) {
    .ai-fab {
        bottom: calc(var(--tabbar-h) + 14px + env(safe-area-inset-bottom));
    }
    .ai-panel {
        bottom: calc(var(--tabbar-h) + 82px + env(safe-area-inset-bottom));
        height: min(520px, calc(100vh - (var(--topbar-h) + var(--tabbar-h) + 110px)));
    }
}


.table > :not(caption) > * > * {
    padding: .45rem .55rem;
}

.btn {
    --bs-btn-padding-y: .375rem;
    --bs-btn-padding-x: .75rem;
}

@media (max-width:991px) {
    .app-shell {
        grid-template-columns: 1fr;
    }
}


@media (max-width:575.98px) {
    .avatar {
        width: 64px;
        height: 64px;
        border-radius: 14px;
    }
    .kv {
        grid-template-columns: 120px 1fr;
        font-size: .92rem;
    }
    .table-responsive {
        -webkit-overflow-scrolling: touch;
    }
}


.offcanvas.offcanvas-start {
    width: min(86vw, 320px);
}

@media (max-width:991px) {
    .offcanvas-body {
        padding-bottom: calc(16px + env(safe-area-inset-bottom));
    }
}


.table-responsive {
    overflow-x: auto;
}


@media (max-width:575.98px) {
    .app-main .small-note {
        font-size: .85rem;
    }
}


.sidebar-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2px;
    padding: 6px 0 12px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 12px;
}

.qr-box {
    width: 72px;
    height: 72px;
    border-radius: 14px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    background: transparent;
    margin-bottom: 6px;
}

.qr-box img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 12px;
}
.brand-name {
    font-weight: 900;
    letter-spacing: .3px;
}

.brand-role {
    color: #16a34a;
    font-weight: 800;
    font-size: 13px;
}

.brand-clinic {
    color: #94a3b8;
    font-weight: 800;
    font-size: 12px;
    letter-spacing: .4px;
}

.sidebar-actions .btn {
    border-radius: 12px;
    padding: 8px 10px;
    font-weight: 700;
}

.sidebar-group-title {
    margin-top: 14px;
    font-size: 12px;
    font-weight: 800;
    color: var(--muted);
    letter-spacing: .6px;
}

.sidebar-nav {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    color: var(--text);
    text-decoration: none;
    border: 1px solid transparent;
    background: transparent;
}


.sidebar-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-sublink {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .sidebar-link:hover {
        background: #f3f6ff;
        border-color: #dbe6ff;
    }

    .sidebar-link.active {
        background: #eaf2ff;
        border-color: #cfe0ff;
        color: #0b4fbf;
    }

.sidebar-sublink {
    display: block;
    padding: 7px 12px 7px 38px;
    color: var(--muted);
    text-decoration: none;
    border-radius: 10px;
}

    .sidebar-sublink:hover {
        background: #f7f8fb;
        color: var(--text);
    }

.collapse-toggle {
    width: 100%;
    text-align: left;
}


.page-head {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

    .page-head h4 {
        margin: 0;
        font-weight: 800;
        color: #0b4fbf;
    }

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}


.dashboard-page-head {
    flex-wrap: nowrap;
    column-gap: 16px;
}

.dashboard-page-head .dashboard-filter-bar {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    align-items: center;
}

.dashboard-page-head .dashboard-filter-bar.has-branch {
    justify-content: flex-end;
}

.dashboard-page-head .dashboard-filter-bar.no-branch {
    justify-content: flex-end;
}

.dashboard-page-head .dash-branch-filter {
    flex: 0 1 320px;
}

.dashboard-page-head .dash-filter-group {
    flex: 0 0 360px;
    max-width: 360px;
    min-width: 300px;
}

@media (max-width: 991.98px) {
    .dashboard-page-head {
        flex-wrap: wrap;
    }

    .dashboard-page-head .dashboard-filter-bar {
        flex: 1 1 100%;
        width: 100%;
    }
}

@media (max-width: 575.98px) {
    .dashboard-page-head .dashboard-filter-bar,
    .dashboard-page-head .dashboard-filter-bar.has-branch,
    .dashboard-page-head .dashboard-filter-bar.no-branch {
        justify-content: stretch;
    }

    .dashboard-page-head .dash-branch-filter,
    .dashboard-page-head .dash-filter-group {
        flex: 1 1 100%;
        max-width: 100%;
        min-width: 0;
        width: 100%;
    }
}


.dash-branch-filter {
    min-width: 240px;
    max-width: 320px;
}

.dash-branch-filter .input-group-text {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #2563eb;
}

.dash-branch-filter .form-select {
    border-color: #bfdbfe;
    color: #0f172a;
    font-weight: 700;
}



@media (max-width: 575.98px){
    .dash-filter-group{ flex-wrap: nowrap; width:100%; }
    .dash-filter-group .form-control{ flex: 1 1 auto; min-width: 0; }
    .dash-filter-group .btn{ width:auto; padding-left:.6rem; padding-right:.6rem; }
}

.card-soft {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 10px 22px rgba(15,23,42,.05);
}

.kpi {
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
}

    .kpi .icon {
        width: 44px;
        height: 44px;
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 2px solid #dbeafe;
        color: #1d4ed8;
    }

    .kpi .meta {
        line-height: 1.2;
    }

    .kpi .label {
        font-size: 12px;
        color: var(--muted);
        font-weight: 800;
        letter-spacing: .3px;
    }

    .kpi .value {
        font-size: 22px;
        font-weight: 900;
    }

.money {
    font-weight: 900;
}


.tc-table td.money {
    font-weight: 600;
}


.pk-card .pk-head {
    flex-wrap: wrap !important;
}


.suggest-item.active {
    background: #e2e8f0;
}

    .money.masked {
        letter-spacing: 2px;
        color: #0f172a;
    }

.section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 18px 0 10px;
}

    .section-title h5 {
        margin: 0;
        font-weight: 900;
    }

.small-note {
    color: var(--muted);
    font-size: 12px;
}

.tab-card {
    padding: 12px;
}

.insight {
    padding: 10px 12px;
    border: 1px dashed #d1d5db;
    border-radius: 14px;
    background: #fbfdff;
    color: var(--text);
}

.block-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 10px 22px rgba(15,23,42,.05);
    padding: 14px;
}



.dash-wrap{width:100%;max-width:1280px;margin:0 auto;}
@media (min-width:1400px){.dash-wrap{max-width:1380px;}}


.kpi-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.kpi-link:hover .card-soft {
    border-color: #c7d2fe;
    box-shadow: 0 12px 26px rgba(37,99,235,.12);
}



.chart-scroll{
    position: relative;
    height: 260px;
    overflow-x: hidden;
    overflow-y: hidden;
    padding-bottom: 6px;
}


.chart-scroll canvas{
    display: block;
}

@media (max-width: 576px){
    .chart-scroll{ height: 220px; }
}

.block-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.block-title {
    font-weight: 900;
    letter-spacing: .2px;
}

    .block-title.orange {
        color: #f59e0b;
    }

    .block-title.green {
        color: #10b981;
    }

    .block-title.blue {
        color: #2563eb;
    }

.right-info {
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
}

.pet-species-scroll {
    max-height: 177px;
    overflow-y: auto;
    overflow-x: hidden;
}

.right-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    background: #fff;
    border-bottom: 1px solid var(--line);
}

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

.right-label {
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.right-value {
    font-weight: 900;
}

.money {
    font-weight: 900;
    font-size: 18px;
}

    .money.masked {
        letter-spacing: 2px;
    }

.money-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

@media (min-width:1200px) {
    .money-grid {
        
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
    }
}


.money-grid .mini-card {
    padding: 10px;
    border-radius: 12px;
}

.money-grid .mini-label {
    font-size: 11px;
}

.money-grid .money {
    font-size: 16px;
}


.money-block .money-grid .mini-card{
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-height: 74px;
}


.ratio-block{display:flex;flex-direction:column;}
.ratio-grid{
    display:grid;
    gap: 10px;
    grid-template-columns: 1fr;
    flex: 1;
}
@media (min-width:1200px){
    .ratio-grid{grid-template-columns: repeat(2, minmax(0,1fr));}
}

.ratio-item{
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    padding: 10px;
    display:flex;
    flex-direction:column;
}

.ratio-title{
    font-size: 11px;
    color: var(--muted);
    font-weight: 800;
    letter-spacing: .3px;
    margin-bottom: 6px;
}

.ratio-canvas{
    position: relative;
    flex: 1;
    min-height: 210px;
}

@media (max-width: 576px){
    .ratio-canvas{min-height: 190px;}
}

.mini-card {
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    padding: 12px;
}

.mini-label {
    font-size: 12px;
    color: var(--muted);
    font-weight: 800;
    letter-spacing: .3px;
}

.mini-value {
    font-size: 20px;
    font-weight: 900;
}

.small-icon {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #dbeafe;
    color: #1d4ed8;
}


.pcd-list-table {
    
    width: 100%;
    table-layout: fixed;
}

.pcd-list-table th,
.pcd-list-table td {
    
    white-space: normal;
    vertical-align: middle;
    overflow-wrap: anywhere;
    word-break: break-word;
}


.pcd-list-table .truncate-2 {
    white-space: normal;
}


.pcd-list-table .pcd-nowrap {
    white-space: nowrap;
}




@media (max-width:575.98px) {
    .app-topbar {
        gap: 8px;
        padding: 8px 10px;
    }
    .app-title {
        flex: 1 1 auto;
        min-width: 0;
        font-size: 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .app-user {
        margin-left: 0;
        gap: 6px;
        flex: 0 0 auto;
    }
    .app-user-meta {
        gap: 6px;
    }
    .app-user-badge {
        padding: .32rem .55rem;
        font-size: 12px;
    }
    .app-user-name {
        max-width: 110px;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 12px;
    }
    .app-user form {
        margin-left: 0 !important;
    }
    .app-user button {
        padding: .25rem .5rem;
        font-size: 12px;
    }
}

@media (max-width: 575.98px){
    .ai-fab{ display:flex !important; }
    .ai-panel{ display:none; }
    .ai-panel.show{ display:flex !important; }
    .filter-bar{ width:100%; }
    .dash-filter-group{ max-width:100%; }
    .dash-filter-group .input-group-text{ padding:.25rem .5rem; }
    .dash-filter-group .form-control{ padding:.25rem .5rem; }
    .table thead th{ font-size:12px; white-space:nowrap; }
}



.offcanvas-backdrop{
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
}
.offcanvas-backdrop.show{ opacity: .38 !important; }
.offcanvas.offcanvas-start{
    z-index: 1046;
}
.offcanvas-backdrop{
    z-index: 1045;
}
body.sidebar-open{
    overflow: hidden;
}
body.sidebar-open .suggest-box,
body.sidebar-open .dt-suggest-box,
body.sidebar-open .global-search-results,
body.sidebar-open .pos-results,
body.sidebar-open .autocomplete-items,
body.sidebar-open .ts-dropdown,
body.sidebar-open .select2-container,
body.sidebar-open datalist{
    display:none !important;
}
@media (max-width: 991.98px){
    .app-shell,
    .app-main,
    .app-content{
        min-width:0;
        width:100%;
        overflow-x:hidden;
    }
    .app-main{
        position:relative;
        isolation:isolate;
    }
}


.suggest-box,
.dt-suggest-box,
.global-search-results,
.pos-results{
    z-index: 1040;
}


@media (max-width: 991.98px){
    .search-wrap,
    .position-relative{
        min-width:0;
    }
    .search-wrap .suggest-box,
    .global-search .global-search-results,
    .dt-suggest-box{
        max-width:100%;
    }
}


.modal{
    -webkit-overflow-scrolling:touch;
    z-index: var(--vds-modal-z) !important;
}
.modal-backdrop{
    backdrop-filter:none;
    z-index: var(--vds-modal-backdrop-z) !important;
}

body.modal-open .app-topbar{
    z-index: 120140 !important;
}

@media (max-width: 991.98px){
    .modal.show{
        display:flex !important;
        align-items:center;
        justify-content:center;
        padding: var(--vds-modal-safe-top) 8px var(--vds-modal-safe-bottom) !important;
        overflow-y:auto;
    }
    .modal .modal-dialog{
        width:min(100%, var(--bs-modal-width, 500px));
        max-width:min(calc(100vw - 16px), var(--bs-modal-width, 500px)) !important;
        margin:auto !important;
        min-height:auto !important;
        height:auto !important;
    }
    .modal .modal-content{
        max-width:100%;
        max-height:calc(100dvh - var(--vds-modal-safe-top) - var(--vds-modal-safe-bottom));
        min-height:0 !important;
        height:auto !important;
        overflow:hidden;
        display:flex;
        flex-direction:column;
        border-radius:18px !important;
    }
    .modal .modal-body{
        min-height:0;
        overflow-y:auto;
        -webkit-overflow-scrolling:touch;
        overscroll-behavior:contain;
    }
    .modal .row,
    .modal .d-flex,
    .modal .input-group{
        min-width:0;
    }
}

@media (max-width: 575.98px) {
    html, body {
        overflow-x: hidden;
    }

    .modal.show {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    .modal .modal-dialog {
        width: min(calc(100vw - 16px), var(--bs-modal-width, 500px)) !important;
        max-width: min(calc(100vw - 16px), var(--bs-modal-width, 500px)) !important;
    }
    .modal .modal-content {
        border-radius: 18px !important;
        border: 0;
        box-shadow: 0 18px 48px rgba(15, 23, 42, .20);
    }
    .modal .modal-header,
    .modal .modal-footer {
        position: sticky;
        background: #fff;
        z-index: 2;
    }
    .modal .modal-header {
        top: 0;
        box-shadow: 0 1px 0 rgba(0,0,0,.06);
    }
    .modal .modal-footer {
        bottom: 0;
        box-shadow: 0 -8px 18px rgba(15, 23, 42, .08);
        padding-bottom: calc(.75rem + env(safe-area-inset-bottom));
    }

    
    .form-control,
    .form-select,
    .form-check-label,
    .input-group-text,
    .btn,
    .dropdown-item,
    .modal .form-control,
    .modal .form-select,
    .modal .form-check-label,
    .modal .form-label {
        font-size: 16px !important;
    }

    
    #modalLichHen .modal-dialog,
    #mdlLichHen .modal-dialog {
        max-width: min(calc(100vw - 16px), var(--bs-modal-width, 500px)) !important;
        width: min(calc(100vw - 16px), var(--bs-modal-width, 500px)) !important;
    }
    #modalLichHen .modal-body,
    #mdlLichHen .modal-body {
        padding: 12px 12px 16px !important;
    }
    #modalLichHen .modal-footer,
    #mdlLichHen .modal-footer {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: .75rem;
    }
    #modalLichHen .modal-footer .btn,
    #mdlLichHen .modal-footer .btn {
        width: 100%;
        margin: 0 !important;
    }
    #modalLichHen .slot-grid,
    #mdlLichHen .slot-grid,
    .slot-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }
    #modalLichHen .slot-btn,
    #mdlLichHen .slot-btn,
    .slot-btn {
        min-width: 0 !important;
        width: 100%;
        padding: 10px 8px !important;
        text-align: center;
        font-size: 14px !important;
        line-height: 1.2;
    }
    #modalLichHen .lh-nd-sel,
    #mdlLichHen .lh-nd-sel,
    .lh-nd-sel {
        width: 100% !important;
        max-width: none !important;
        flex: 1 1 100%;
    }
    #modalLichHen .d-flex.align-items-center.gap-2,
    #mdlLichHen .d-flex.align-items-center.gap-2,
    #frmLichHenEdit .d-flex.align-items-center.gap-2 {
        flex-wrap: wrap;
        align-items: stretch !important;
    }
    #modalLichHen .form-check,
    #mdlLichHen .form-check,
    #frmLichHenEdit .form-check {
        min-width: 0;
    }
}



@media (max-width: 575.98px){
    #secTaoDonNhanh .pk-footerbar,
    #secTaoDonNhanh .pk-footerbar:has(.action-buttons),
    .pk-footerbar:has(.action-buttons){
        align-items: stretch;
        gap: 10px;
    }

    
    .pk-footerbar:has(.action-buttons) > a.btn,
    .pk-footerbar:has(.action-buttons) > button.btn-light,
    .pk-footerbar:has(.action-buttons) > button.btn-outline-secondary{
        width: 100%;
    }

    #secTaoDonNhanh .pk-footerbar > .action-buttons,
    .pk-footerbar > .action-buttons{
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 10px !important;
        width: 100%;
        min-width: 0;
    }

    #btnPrintTempF6,
    #btnDatLichHenF7,
    #btnThanhToanF9,
    #btnOpenLichHenFromFooter,
    #btnUpdate,
    #btnPay,
    #btnTaoDonF8{
        width: 100%;
        min-width: 0;
        justify-content: center;
        text-align: center;
        white-space: normal;
        min-height: 52px;
        display: inline-flex;
        align-items: center;
    }

    
    #btnPrintTempF6{ order: 1; }
    #btnDatLichHenF7,
    #btnOpenLichHenFromFooter{ order: 2; }
    #btnTaoDonF8,
    #btnUpdate{ order: 3; }
    #btnThanhToanF9,
    #btnPay{ order: 4; }

    
    #btnThanhToanSubmitHidden,
    #btnLuuPhieuKhamHidden{
        display: none !important;
    }
}



@media (max-width: 991.98px){
    html{
        -webkit-text-size-adjust: 100%;
    }

    .app-main{
        padding: 10px;
    }

    .app-content{
        gap: 10px;
    }

    .card,
    .pk-card,
    .modal-content,
    .offcanvas,
    .table-responsive{
        max-width: 100%;
    }

    .card,
    .pk-card{
        border-radius: 16px;
        overflow: hidden;
    }

    .card-body,
    .pk-body,
    .modal-body{
        min-width: 0;
    }

    .btn{
        --bs-btn-padding-y: .56rem;
        --bs-btn-padding-x: .9rem;
        font-size: .96rem;
        line-height: 1.25;
    }

    .btn-sm{
        --bs-btn-padding-y: .42rem;
        --bs-btn-padding-x: .72rem;
        font-size: .88rem;
    }

    .btn-pill{
        min-height: 44px;
    }

    .form-control,
    .form-select,
    .input-group > .form-control,
    .input-group > .form-select,
    .input-group > .btn{
        min-height: 42px;
    }

    .table-responsive{
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .table > :not(caption) > * > *{
        padding: .55rem .6rem;
        vertical-align: middle;
    }

    .ql-toolbar.ql-snow{
        padding: 6px 8px;
    }

    .ql-toolbar.ql-snow .ql-formats{
        margin-right: 6px;
    }

    .pk-editor .ql-editor,
    #quillKetLuan .ql-editor{
        font-size: 15px;
        line-height: 1.5;
    }
}

@media (min-width: 576px) and (max-width: 991.98px){
    .app-topbar{
        gap: 10px;
        padding-left: 12px;
        padding-right: 12px;
    }

    .app-title{
        font-size: 15px;
    }

    .pk-footerbar,
    .pt-actions,
    .pc-actions{
        gap: 10px;
    }

    .pk-footerbar > .action-buttons,
    .pt-actions,
    .pc-actions{
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px !important;
        width: 100%;
    }

    .pk-footerbar > .action-buttons > .btn,
    .pt-actions > .btn,
    .pc-actions > .btn,
    #btnPrintTempF6,
    #btnDatLichHenF7,
    #btnOpenLichHenFromFooter,
    #btnTaoDonF8,
    #btnUpdate,
    #btnThanhToanF9,
    #btnPay{
        width: 100%;
        min-width: 0;
        min-height: 46px;
        white-space: normal;
        justify-content: center;
    }
}

@media (max-width: 575.98px){
    .app-topbar{
        gap: 8px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .app-main{
        padding: 8px;
    }

    .card,
    .pk-card{
        border-radius: 14px;
    }

    .card-body,
    .pk-body{
        padding: 12px;
    }

    .btn{
        --bs-btn-padding-y: .5rem;
        --bs-btn-padding-x: .78rem;
        font-size: .92rem;
    }

    .btn-pill{
        min-height: 42px;
    }

    .table{
        font-size: .9rem;
    }

    .table > :not(caption) > * > *{
        padding: .5rem .55rem;
    }

    .pk-head,
    .pk-footerbar{
        gap: 10px;
    }

    .pk-footerbar > .text-muted.small:empty,
    .pk-footerbar > .text-muted.small{
        display: none !important;
    }

    #secTaoDonNhanh .pk-footerbar,
    .pk-footerbar,
    .pt-actions,
    .pc-actions{
        align-items: stretch;
    }

    #secTaoDonNhanh .pk-footerbar > .action-buttons,
    .pk-footerbar > .action-buttons,
    .pt-actions,
    .pc-actions{
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px !important;
        width: 100%;
    }

    #secTaoDonNhanh .pk-footerbar > .action-buttons > .btn,
    .pk-footerbar > .action-buttons > .btn,
    .pt-actions > .btn,
    .pc-actions > .btn,
    #btnPrintTempF6,
    #btnDatLichHenF7,
    #btnOpenLichHenFromFooter,
    #btnTaoDonF8,
    #btnUpdate,
    #btnThanhToanF9,
    #btnPay{
        width: 100%;
        min-width: 0;
        min-height: 42px;
        padding-left: .72rem;
        padding-right: .72rem;
        font-size: .9rem !important;
        white-space: normal;
        justify-content: center;
        text-align: center;
        line-height: 1.2;
        display: inline-flex;
        align-items: center;
        gap: .35rem;
    }

    #btnPrintTempF6,
    #btnDatLichHenF7,
    #btnOpenLichHenFromFooter,
    #btnTaoDonF8,
    #btnUpdate,
    #btnThanhToanF9,
    #btnPay{
        border-width: 1.5px;
    }

    #btnPrintTempF6{ order: 1; }
    #btnDatLichHenF7,
    #btnOpenLichHenFromFooter{ order: 2; }
    #btnTaoDonF8,
    #btnUpdate{ order: 3; }
    #btnThanhToanF9,
    #btnPay{ order: 4; }

    .modal .modal-header,
    .modal .modal-footer{
        padding-left: 12px;
        padding-right: 12px;
    }

    .modal .modal-body{
        padding: 12px;
    }

    .pk-editor .ql-editor,
    #quillKetLuan .ql-editor{
        min-height: 140px;
        font-size: 15px;
    }
}



@media (max-width: 767.98px){
    
    input.form-control[type="text"],
    input.form-control[type="search"],
    input.form-control:not([type]),
    textarea.form-control,
    select.form-select,
    #khSearch,
    #pcdCustomerSearchText,
    #khKhachHangText,
    #dtThuocSearch {
        font-size: 16px !important;
    }

    .search-wrap,
    .vds-customer-search-wrap,
    .vds-search,
    .pk-card .search-wrap {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    #khSearch,
    #pcdCustomerSearchText,
    #khKhachHangText {
        min-height: 48px;
        width: 100%;
    }

    #khSuggest,
    .vds-customer-suggest,
    .search-wrap .suggest-box {
        width: 100%;
        max-width: 100%;
    }

    
    #secDonThuocInline .toa-wrap {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
    }

    #secDonThuocInline .table-responsive {
        overflow-x: visible;
    }

    #secDonThuocInline .toa-table {
        min-width: 1280px;
        width: max-content;
    }

    #secDonThuocInline .toa-table td,
    #secDonThuocInline .toa-table th {
        white-space: nowrap;
    }

    
    .tc-mobile-3 {
        width: 100%;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px !important;
    }

    .tc-mobile-3 > .btn {
        width: 100%;
        min-width: 0;
        padding: .5rem .45rem;
        font-size: .82rem;
        line-height: 1.15;
        white-space: nowrap;
        justify-content: center;
    }

    
    .kh-mobile-actions {
        width: 100%;
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px !important;
        align-items: stretch;
    }

    .kh-mobile-actions > .btn {
        width: 100%;
        min-width: 0;
        padding: .5rem .3rem;
        font-size: .78rem !important;
        line-height: 1.15;
        white-space: nowrap;
        justify-content: center;
    }

    .kh-mobile-actions .vds-debt,
    .kh-mobile-actions .vds-tichdiem {
        grid-column: span 2;
    }

    
    .pcd-top-actions {
        width: 100%;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px !important;
    }

    .pcd-top-actions > .btn {
        width: 100%;
        min-width: 0;
        padding: .6rem .45rem;
        font-size: .8rem;
        line-height: 1.15;
        white-space: nowrap;
        justify-content: center;
    }
}

@media (max-width: 575.98px){
    .tc-mobile-3 > .btn i,
    .kh-mobile-actions > .btn i,
    .pcd-top-actions > .btn i {
        margin-right: .22rem;
    }

    .member-card-preview-compact,
    body:not(.hide-on-screen) .member-card {
        max-width: 100%;
    }
}



@media (max-width: 767.98px){
    
    .kh-mobile-actions{
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px !important;
    }
    .kh-mobile-actions .vds-debt,
    .kh-mobile-actions .vds-tichdiem{
        width: 100%;
        min-width: 0;
        align-self: stretch;
    }
    .kh-mobile-actions .vds-debt{
        grid-column: 1 / span 2;
    }
    .kh-mobile-actions .vds-tichdiem{
        grid-column: 3 / span 2;
        justify-content: center;
        padding: 0 .4rem;
        font-size: .8rem;
        line-height: 1.05;
        gap: .35rem;
        min-height: 42px;
    }
    .kh-mobile-actions .vds-tichdiem span{
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .kh-mobile-actions .vds-debt .input-group-text,
    .kh-mobile-actions .vds-debt .form-select{
        font-size: .8rem;
        padding-left: .45rem;
        padding-right: .45rem;
    }
    .kh-mobile-actions > .btn{
        padding: .48rem .25rem;
        font-size: .74rem !important;
        line-height: 1.15;
        white-space: normal;
        text-align: center;
        min-height: 42px;
    }

    
    .pk-card .search-wrap{
        width: 100%;
        max-width: 100%;
    }
    #khSearch{
        width: 100% !important;
        min-width: 0 !important;
        display: block;
    }
    #khSuggest.suggest-box{
        position: static !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        margin-top: 8px;
        width: 100% !important;
        max-width: 100% !important;
        max-height: min(42vh, 320px) !important;
        z-index: 1;
    }

    
    .tc-mobile-3{
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px !important;
    }
    .tc-mobile-3 > .btn{
        min-height: 44px;
        padding: .48rem .3rem;
        font-size: .72rem;
        line-height: 1.1;
        white-space: normal;
        text-wrap: balance;
        text-align: center;
    }

    
    .pcd-top-actions > .btn{
        min-height: 44px;
        padding: .5rem .4rem;
        font-size: .76rem;
        line-height: 1.1;
        white-space: normal;
        text-align: center;
    }
}

@media (max-width: 575.98px){
    .kh-mobile-actions{
        gap: 8px !important;
    }
    .kh-mobile-actions .vds-debt .input-group-text,
    .kh-mobile-actions .vds-debt .form-select,
    .kh-mobile-actions .vds-tichdiem{
        min-height: 40px;
    }

    
    #khSuggest .suggest-item{
        padding: 9px 10px;
    }
    #khSuggest .suggest-item .name{
        font-size: .96rem;
    }
    #khSuggest .suggest-item .meta{
        font-size: .82rem;
        gap: 8px;
    }
}

.sidebar-logo-fallback-icon {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 28px;
}



.vds-notification {
    position: relative;
    flex: 0 0 auto;
}

.vds-notification-trigger {
    position: relative;
    width: 30px;
    height: 30px;
    border: 0;
    background: transparent;
    border-radius: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #475569;
    box-shadow: none;
    padding: 0;
}

.vds-notification-trigger:hover {
    background: transparent;
    color: #0f172a;
}

.vds-notification-trigger i {
    font-size: 1.2rem;
}

.vds-notification-count {
    position: absolute;
    top: -2px;
    right: -1px;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-size: .78rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
}

.vds-notification-dropdown {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: min(440px, calc(100vw - 24px));
    max-height: 78vh;
    background: #fff;
    border-radius: 22px;
    border: 1px solid #dfe7ef;
    box-shadow: 0 24px 50px rgba(15, 23, 42, .18);
    overflow: hidden;
}

.vds-notification-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.vds-notification-header {
    background: linear-gradient(180deg, #4fb47d 0%, #4fb47d 100%);
    padding: 24px 24px 36px;
}

.vds-notification-title {
    text-align: center;
    color: #fff;
    font-size: 1.9rem;
    font-weight: 800;
    flex: 1 1 auto;
    padding-left: 36px;
}

.vds-notification-settings-btn {
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255,255,255,.28);
    background: rgba(255,255,255,.12);
    color: #fff;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.vds-notification-settings-btn:hover,
.vds-notification-settings-btn.is-active {
    background: rgba(255,255,255,.2);
}

.vds-notification-settings-panel {
    padding: 12px 18px;
    background: #f8fafc;
    border-bottom: 1px solid #edf2f7;
}

.vds-notification-setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
}

.vds-notification-setting-text {
    font-size: .95rem;
    font-weight: 600;
    color: #0f172a;
}

.vds-switch {
    position: relative;
    width: 46px;
    height: 26px;
    flex: 0 0 auto;
}

.vds-switch input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.vds-switch-slider {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: #cbd5e1;
    transition: all .2s ease;
}

.vds-switch-slider::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .18);
    transition: all .2s ease;
}

.vds-switch input:checked + .vds-switch-slider {
    background: #4fb47d;
}

.vds-switch input:checked + .vds-switch-slider::after {
    left: 23px;
}

.vds-notification-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    padding: 16px 16px 10px;
    margin-top: -18px;
    background: #fff;
}

.vds-notification-tab {
    border: 0;
    background: #fff;
    color: #0f172a;
    border-radius: 999px;
    min-height: 42px;
    font-weight: 700;
    font-size: .9rem;
    line-height: 1.1;
    padding: 0 8px;
    white-space: nowrap;
}

.vds-notification-tab.is-active {
    background: #eaf7f0;
    color: #43a56f;
}

.vds-notification-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 22px 12px;
    border-bottom: 1px solid #edf2f7;
}

.vds-notification-section-label {
    font-size: 1.05rem;
    font-weight: 800;
    color: #111827;
}

.vds-notification-read-all {
    border: 0;
    background: transparent;
    color: #43a56f;
    font-weight: 700;
}

.vds-notification-list {
    max-height: calc(78vh - 180px);
    overflow: auto;
    background: #fff;
}

.vds-notification-item {
    position: relative;
    display: flex;
    gap: 16px;
    padding: 18px 22px;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid #edf2f7;
}

.vds-notification-item:hover {
    background: #f8fafc;
}

.vds-notification-item-icon {
    width: 60px;
    height: 60px;
    flex: 0 0 60px;
    border-radius: 999px;
    background: #4fb47d;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.65rem;
}

.vds-notification-item.is-read .vds-notification-item-icon {
    background: #e5e7eb;
    color: #6b7280;
}

.vds-notification-item-content {
    flex: 1 1 auto;
    min-width: 0;
}

.vds-notification-item-message {
    font-size: 1rem;
    line-height: 1.45;
    color: #1f2937;
}

.vds-notification-item-time {
    margin-top: 8px;
    color: #43a56f;
    font-weight: 600;
}

.vds-notification-item-dot {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: #ff0000;
    flex: 0 0 18px;
    align-self: center;
}

.vds-notification-empty {
    padding: 34px 28px 40px;
    text-align: center;
}

.vds-notification-empty-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 14px;
    border-radius: 999px;
    background: #eaf7f0;
    color: #43a56f;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
}

.vds-notification-empty-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: #111827;
}

.vds-notification-empty-text {
    margin-top: 8px;
    color: #64748b;
    line-height: 1.6;
}

@media (max-width: 991.98px) {
    .app-user {
        gap: 8px;
    }

    .vds-notification-dropdown {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: min(100vw, 520px);
        max-width: 100vw;
        max-height: min(82vh, calc(100vh - var(--topbar-h) - env(safe-area-inset-top) - 12px));
        border-radius: 24px 24px 0 0;
        border-left: none;
        border-right: none;
        border-bottom: none;
        box-shadow: 0 -18px 48px rgba(15, 23, 42, .18);
        z-index: 1090;
        overscroll-behavior: contain;
        padding-bottom: env(safe-area-inset-bottom);
        animation: vdsNotificationSheetIn .22s ease-out;
    }

    .vds-notification-header {
        position: sticky;
        top: 0;
        z-index: 2;
        padding-top: 18px;
        border-radius: 24px 24px 0 0;
    }

    .vds-notification-header::before {
        content: '';
        display: block;
        width: 46px;
        height: 5px;
        border-radius: 999px;
        margin: 0 auto 14px;
        background: rgba(255,255,255,.55);
    }

    .vds-notification-title {
        font-size: 1.6rem;
    }

    .vds-notification-tabs {
        position: sticky;
        top: 96px;
        z-index: 2;
        gap: 8px;
        padding-left: 12px;
        padding-right: 12px;
        background: #fff;
    }

    .vds-notification-tab {
        min-height: 40px;
        font-size: .82rem;
        padding-left: 6px;
        padding-right: 6px;
    }

    .vds-notification-title {
        font-size: 1.45rem;
        padding-left: 28px;
    }
}

@keyframes vdsNotificationSheetIn {
    from {
        opacity: 0;
        transform: translate(-50%, 24px);
    }
    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}


.vds-notification-badge-pulse {
    animation: vdsNotificationBadgePulse .85s ease;
}

@keyframes vdsNotificationBadgePulse {
    0% { transform: scale(1); }
    30% { transform: scale(1.18); }
    60% { transform: scale(0.96); }
    100% { transform: scale(1); }
}



.vds-toast-stack {
    position: fixed;
    top: calc(var(--topbar-h) + env(safe-area-inset-top) + 16px);
    right: 16px;
    z-index: 1085;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(520px, calc(100vw - 24px));
    pointer-events: none;
}

.vds-toast {
    pointer-events: auto;
    display: grid;
    grid-template-columns: 34px 1fr 28px;
    align-items: center;
    gap: 10px;
    background: #ffffff;
    border: 1px solid #dbe4ef;
    border-radius: 16px;
    box-shadow: 0 16px 40px rgba(15, 23, 42, .18);
    padding: 10px 12px;
    transform: translateY(-8px);
    opacity: 0;
    animation: vdsToastIn .22s ease-out forwards;
}

.vds-toast.is-leaving {
    animation: vdsToastOut .2s ease-in forwards;
}

.vds-toast-icon {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: #ecfdf5;
    color: #22c55e;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.vds-toast-body {
    min-width: 0;
    color: #0f172a;
    text-decoration: none;
    display: block;
    line-height: 1.25;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vds-toast-body strong {
    font-weight: 800;
}

.vds-toast-time {
    color: #64748b;
    font-size: 11px;
    margin-top: 4px;
}

.vds-toast-close {
    border: 0;
    background: transparent;
    color: #94a3b8;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.vds-toast-close:hover {
    background: #f1f5f9;
    color: #334155;
}

@keyframes vdsToastIn {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(.98);
    }

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

@keyframes vdsToastOut {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    to {
        opacity: 0;
        transform: translateY(-8px) scale(.98);
    }
}

@media (max-width: 767.98px) {
    .vds-toast-stack {
        left: 12px;
        right: 12px;
        width: auto;
        top: calc(var(--topbar-h) + env(safe-area-inset-top) + 10px);
    }

    .vds-toast {
        grid-template-columns: 32px 1fr 26px;
        padding: 9px 10px;
        border-radius: 14px;
    }

    .vds-toast-icon {
        width: 32px;
        height: 32px;
        font-size: 15px;
    }

    .vds-toast-body {
        font-size: 12px;
    }
}



@media (max-width: 768px){
    .card .table-responsive:has(.vds-mobile-card-table),
    .table-responsive:has(.vds-mobile-card-table){
        overflow: visible !important;
    }

    .vds-mobile-card-table thead{
        display:none;
    }
    .vds-mobile-card-table,
    .vds-mobile-card-table tbody,
    .vds-mobile-card-table tr,
    .vds-mobile-card-table td{
        display:block;
        width:100%;
    }
    .vds-mobile-card-table{
        border-collapse:separate;
        background:transparent;
    }
    .vds-mobile-card-table > tbody > tr{
        margin:12px 10px;
        border:1px solid rgba(15,23,42,.08);
        border-radius:18px;
        overflow:hidden;
        background:#fff;
        box-shadow:0 8px 24px rgba(15,23,42,.06);
    }
    .vds-mobile-card-table > tbody > tr > td{
        border:0 !important;
        border-bottom:1px solid rgba(15,23,42,.06) !important;
        padding:12px 14px !important;
        text-align:left !important;
        white-space:normal !important;
    }
    .vds-mobile-card-table > tbody > tr > td:last-child{
        border-bottom:0 !important;
    }
    .vds-mobile-card-table > tbody > tr > td[data-label]::before{
        content: attr(data-label);
        display:block;
        margin-bottom:6px;
        color:#6b7280;
        font-size:12px;
        font-weight:700;
        letter-spacing:.02em;
        text-transform:uppercase;
    }
    .vds-mobile-card-table .text-center,
    .vds-mobile-card-table .text-end{
        text-align:left !important;
    }
    .vds-mobile-card-table .vds-mobile-action-cell{
        background:#f8fafc;
    }
    .vds-mobile-card-table .vds-mobile-action-cell form,
    .vds-mobile-card-table .vds-mobile-action-cell .d-inline,
    .vds-mobile-card-table .vds-mobile-action-cell .d-inline-flex,
    .vds-mobile-card-table .vds-mobile-action-cell .d-flex,
    .vds-mobile-card-table .vds-mobile-action-cell .dropdown,
    .vds-mobile-card-table .vds-mobile-action-cell > a,
    .vds-mobile-card-table .vds-mobile-action-cell > button{
        display:block !important;
        width:100%;
    }
    .vds-mobile-card-table .vds-mobile-action-cell .btn{
        width:100%;
        justify-content:center;
        margin-bottom:8px;
    }
    .vds-mobile-card-table .vds-mobile-action-cell .btn:last-child{
        margin-bottom:0;
    }
    .vds-mobile-card-table .vds-mobile-action-cell .dropdown-menu{
        width:100%;
    }

    .vds-mobile-card-table > tbody > tr > td[data-label="Thú cưng"],
    .vds-mobile-card-table > tbody > tr > td[data-label="Tên thú cưng"]{
        text-align:left !important;
    }
    .vds-mobile-card-table > tbody > tr > td[data-label="Thú cưng"] .d-flex,
    .vds-mobile-card-table > tbody > tr > td[data-label="Tên thú cưng"] .d-flex{
        align-items:flex-start !important;
        justify-content:flex-start !important;
    }
    .vds-mobile-card-table > tbody > tr > td[data-label="Thú cưng"] .cell-compact,
    .vds-mobile-card-table > tbody > tr > td[data-label="Tên thú cưng"] .cell-compact,
    .vds-mobile-card-table > tbody > tr > td[data-label="Thú cưng"] a,
    .vds-mobile-card-table > tbody > tr > td[data-label="Tên thú cưng"] a,
    .vds-mobile-card-table > tbody > tr > td[data-label="Thú cưng"] .fw-bold,
    .vds-mobile-card-table > tbody > tr > td[data-label="Tên thú cưng"] .fw-bold{
        text-align:left !important;
        justify-content:flex-start !important;
    }
}



@media (max-width: 767.98px){
    body{
        background:#f8fafc;
    }

    .app-main,
    .app-content{
        background:transparent;
    }

    .table-card,
    .vds-fill-card,
    .card.table-card,
    .card.vds-fill-card{
        border:1px solid rgba(226,232,240,.95) !important;
        border-radius:22px !important;
        background:linear-gradient(180deg,#ffffff 0%,#fcfdff 100%) !important;
        box-shadow:0 14px 34px rgba(15,23,42,.06) !important;
        overflow:hidden;
    }

    .table-card .table-responsive,
    .vds-fill-card .table-responsive,
    .card.table-card .table-responsive,
    .card.vds-fill-card .table-responsive{
        padding:6px 0 8px;
        overflow:visible !important;
    }

    .vds-mobile-card-table{
        margin-bottom:0;
    }

    .vds-mobile-card-table > tbody > tr{
        position:relative;
        margin:14px 10px 16px;
        border:1px solid #e2e8f0;
        border-radius:20px;
        overflow:hidden;
        background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
        box-shadow:0 10px 28px rgba(15,23,42,.07);
    }

    .vds-mobile-card-table > tbody > tr::before{
        content:"";
        position:absolute;
        inset:0 auto 0 0;
        width:4px;
        background:linear-gradient(180deg,#3b82f6 0%,#06b6d4 100%);
        opacity:.9;
    }

    .vds-mobile-card-table > tbody > tr > td{
        position:relative;
        border:0 !important;
        border-bottom:1px solid rgba(226,232,240,.95) !important;
        padding:13px 14px 13px 18px !important;
        text-align:left !important;
        white-space:normal !important;
        background:transparent;
    }

    .vds-mobile-card-table > tbody > tr > td:first-child{
        background:linear-gradient(180deg,#f8fbff 0%,#ffffff 100%);
        padding-top:15px !important;
        padding-bottom:12px !important;
    }

    .vds-mobile-card-table > tbody > tr > td[data-label]::before{
        display:block;
        margin-bottom:7px;
        color:#94a3b8;
        font-size:11px;
        font-weight:800;
        letter-spacing:.08em;
        text-transform:uppercase;
    }

    .vds-mobile-card-table > tbody > tr > td:first-child[data-label]::before{
        color:#64748b;
    }

    .vds-mobile-card-table > tbody > tr > td:last-child{
        border-bottom:0 !important;
    }

    .vds-mobile-card-table td,
    .vds-mobile-card-table td *{
        overflow-wrap:anywhere;
        word-break:break-word;
    }

    .vds-mobile-card-table td a{
        color:#2563eb;
        font-weight:700;
        text-decoration:none;
    }

    .vds-mobile-card-table td a:hover{
        color:#1d4ed8;
        text-decoration:underline;
    }

    .vds-mobile-card-table td .text-muted,
    .vds-mobile-card-table td small,
    .vds-mobile-card-table td .small{
        color:#64748b !important;
    }

    .vds-mobile-card-table td .badge,
    .vds-mobile-card-table td .payment-badge,
    .vds-mobile-card-table td .status-badge,
    .vds-mobile-card-table td .badge.bg-primary,
    .vds-mobile-card-table td .badge.bg-danger,
    .vds-mobile-card-table td .badge.bg-success,
    .vds-mobile-card-table td .badge.bg-warning,
    .vds-mobile-card-table td .badge.bg-info{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        gap:6px;
        min-height:32px;
        padding:6px 12px;
        border-radius:999px;
        font-weight:800;
        font-size:12px;
        line-height:1.2;
        box-shadow:0 6px 16px rgba(15,23,42,.10);
    }

    .vds-mobile-card-table td .payment-badge.bg-primary,
    .vds-mobile-card-table td .badge.bg-primary{
        background:#2563eb !important;
        color:#fff !important;
    }

    .vds-mobile-card-table td .payment-badge.bg-danger,
    .vds-mobile-card-table td .badge.bg-danger{
        background:#ef4444 !important;
        color:#fff !important;
    }

    .vds-mobile-card-table td .badge.bg-success{
        background:#16a34a !important;
        color:#fff !important;
    }

    .vds-mobile-card-table td .badge.bg-warning{
        background:#f59e0b !important;
        color:#111827 !important;
    }

    .vds-mobile-card-table td .badge.bg-info{
        background:#06b6d4 !important;
        color:#fff !important;
    }

    .vds-mobile-card-table .vds-mobile-action-cell{
        background:linear-gradient(180deg,#f8fafc 0%,#f1f5f9 100%);
        padding-top:14px !important;
        padding-bottom:14px !important;
    }

    .vds-mobile-card-table .vds-mobile-action-cell .btn,
    .vds-mobile-card-table .vds-mobile-action-cell .dropdown-toggle,
    .vds-mobile-card-table .vds-mobile-action-cell .form-control,
    .vds-mobile-card-table .vds-mobile-action-cell .form-select{
        min-height:40px;
        border-radius:12px;
    }

    .vds-mobile-card-table .vds-mobile-action-cell .btn{
        width:100%;
        justify-content:center;
        margin-bottom:8px;
        font-weight:700;
        box-shadow:none;
    }

    .vds-mobile-card-table .vds-mobile-action-cell > .d-flex,
    .vds-mobile-card-table .vds-mobile-action-cell > .d-inline-flex,
    .vds-mobile-card-table .vds-mobile-action-cell > .d-inline,
    .vds-mobile-card-table .vds-mobile-action-cell > .dropdown,
    .vds-mobile-card-table .vds-mobile-action-cell > form,
    .vds-mobile-card-table .vds-mobile-action-cell > .btn,
    .vds-mobile-card-table .vds-mobile-action-cell > a,
    .vds-mobile-card-table .vds-mobile-action-cell > button{
        display:block !important;
        width:100%;
    }

    .vds-mobile-card-table .vds-mobile-action-cell > .d-flex,
    .vds-mobile-card-table .vds-mobile-action-cell > .d-inline-flex{
        display:grid !important;
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:8px;
        align-items:stretch;
    }

    .vds-mobile-card-table .vds-mobile-action-cell > .d-flex .btn,
    .vds-mobile-card-table .vds-mobile-action-cell > .d-inline-flex .btn{
        margin-bottom:0;
    }

    .vds-mobile-card-table .vds-mobile-action-cell .dropdown-menu{
        width:100%;
        border-radius:14px;
        border-color:#e2e8f0;
        box-shadow:0 12px 30px rgba(15,23,42,.12);
    }

    .vds-mobile-card-table .text-center,
    .vds-mobile-card-table .text-end{
        text-align:left !important;
    }

    .pcd-top-actions > .btn,
    .tc-mobile-3 > .btn,
    .kh-mobile-actions > .btn{
        min-height:44px;
        border-radius:14px;
        font-weight:700;
        box-shadow:0 8px 18px rgba(15,23,42,.08);
    }

    .pcd-top-actions,
    .tc-mobile-3,
    .kh-mobile-actions{
        gap:10px !important;
    }

    .form-control,
    .form-select,
    .input-group > .form-control,
    .input-group > .form-select{
        border-radius:14px;
        border-color:#dbe3ee;
        box-shadow:none;
    }

    .form-control:focus,
    .form-select:focus{
        border-color:#93c5fd;
        box-shadow:0 0 0 .18rem rgba(37,99,235,.10);
    }
}




@media (min-width: 768px){
    .table td .dropdown > button[data-bs-toggle="dropdown"],
    .table td .dropdown > a[data-bs-toggle="dropdown"]{
        width:44px !important;
        min-width:44px !important;
        height:44px !important;
        padding:0 !important;
        display:inline-flex !important;
        align-items:center !important;
        justify-content:center !important;
        border-radius:16px !important;
        border:1px solid #d7deea !important;
        background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%) !important;
        color:#0f172a !important;
        text-decoration:none !important;
        box-shadow:0 4px 14px rgba(15,23,42,.06) !important;
    }

    .table td .dropdown > button[data-bs-toggle="dropdown"]::after,
    .table td .dropdown > a[data-bs-toggle="dropdown"]::after{
        display:none !important;
    }

    .table td .dropdown > button[data-bs-toggle="dropdown"]:hover,
    .table td .dropdown > a[data-bs-toggle="dropdown"]:hover{
        border-color:#c6d3e6 !important;
        background:linear-gradient(180deg,#ffffff 0%,#eef5ff 100%) !important;
        color:#0f172a !important;
        box-shadow:0 8px 20px rgba(37,99,235,.10) !important;
    }

    .table td .dropdown > button[data-bs-toggle="dropdown"]:focus,
    .table td .dropdown > a[data-bs-toggle="dropdown"]:focus{
        box-shadow:0 0 0 .22rem rgba(37,99,235,.14) !important;
        outline:none !important;
    }

    .table td .dropdown > button[data-bs-toggle="dropdown"] i,
    .table td .dropdown > a[data-bs-toggle="dropdown"] i{
        font-size:20px !important;
        line-height:1 !important;
    }
}

@media (max-width: 767.98px){
    .vds-mobile-card-table > tbody > tr > td[data-card-primary="true"]{
        background:linear-gradient(180deg,#f8fbff 0%,#ffffff 100%);
        padding-top:15px !important;
        padding-bottom:12px !important;
    }
}



:root{
    --vds-search-hover-bg:#e2e8f0;
    --vds-search-active-bg:#cbd5e1;
    --vds-search-border:#cbd5e1;
    --vds-search-text:#0f172a;
    --vds-search-ring:rgba(148,163,184,.18);
}


#searchBox:focus,
#itemSearch:focus,
#mhItemSearch:focus,
#goodsSearch:focus,
#hhSearch:focus,
#dvSearch:focus,
#dvSearchInput:focus,
#hhSearchInput:focus,
#goodsSearchInput:focus,
#multiTemSearch:focus,
#KhachHangSearch:focus,
.vds-search-form .form-control:focus,
.search-wrap .form-control:focus,
.global-search .form-control:focus,
.pos-search .form-control:focus,
.pos-search-input:focus,
input.form-control[list]:focus{
    border-color: var(--vds-search-border) !important;
    box-shadow: 0 0 0 .18rem var(--vds-search-ring) !important;
}


.pos-results .list-group-item,
.pos-results .list-group-item-action{
    color: var(--vds-search-text) !important;
    border-color: rgba(148,163,184,.25) !important;
}
.pos-results .list-group-item:hover,
.pos-results .list-group-item:focus,
.pos-results .list-group-item-action:hover,
.pos-results .list-group-item-action:focus{
    background: var(--vds-search-hover-bg) !important;
    color: var(--vds-search-text) !important;
}
.pos-results .list-group-item.active,
.pos-results .list-group-item:active,
.pos-results .list-group-item-action.active,
.pos-results .list-group-item-action:active{
    background: var(--vds-search-active-bg) !important;
    border-color: var(--vds-search-active-bg) !important;
    color: var(--vds-search-text) !important;
}
.pos-results .list-group-item.active *,
.pos-results .list-group-item:active *,
.pos-results .list-group-item-action.active *,
.pos-results .list-group-item-action:active *{
    color: inherit !important;
}


.vds-search-suggest .vds-suggest-item:hover,
.vds-search-suggest .vds-suggest-item:focus,
.vds-search-suggest .vds-suggest-item.active,
.vds-search-suggest .vds-suggest-item:active,
.vds-search-suggest .dropdown-item:hover,
.vds-search-suggest .dropdown-item:focus,
.vds-search-suggest .dropdown-item.active,
.vds-search-suggest .dropdown-item:active,
.vds-search-suggest .mh-sug-item:hover,
.vds-search-suggest .mh-sug-item:focus,
.vds-search-suggest .mh-sug-item.active,
.vds-search-suggest .mh-sug-item:active,
.vds-search-suggest .suggest-item:hover,
.vds-search-suggest .suggest-item:focus,
.vds-search-suggest .suggest-item.active,
.vds-search-suggest .suggest-item:active,
.suggest-box .suggest-item:hover,
.suggest-box .suggest-item:focus,
.suggest-box .suggest-item.active,
.suggest-box .suggest-item:active,
.dt-suggest-box .dt-suggest-item:hover,
.dt-suggest-box .dt-suggest-item:focus,
.dt-suggest-box .dt-suggest-item.active,
.dt-suggest-box .dt-suggest-item:active,
.global-search-results .dropdown-item:hover,
.global-search-results .dropdown-item:focus,
.global-search-results .dropdown-item.active,
.global-search-results .dropdown-item:active{
    background: var(--vds-search-active-bg) !important;
    color: var(--vds-search-text) !important;
    border-color: var(--vds-search-active-bg) !important;
    box-shadow: none !important;
    outline: none !important;
}
.vds-search-suggest .vds-suggest-item *,
.vds-search-suggest .dropdown-item *,
.vds-search-suggest .mh-sug-item *,
.vds-search-suggest .suggest-item *,
.suggest-box .suggest-item *,
.dt-suggest-box .dt-suggest-item *,
.global-search-results .dropdown-item *{
    color: inherit;
}


.osm-autocomplete{
    max-height:260px;
    overflow-y:auto;
    border:1px solid rgba(15,23,42,.10);
    border-radius:18px;
    background:#fff;
    box-shadow:0 18px 44px rgba(15,23,42,.14);
    padding:6px;
}
.osm-autocomplete__item{
    width:100%;
    border:0;
    background:transparent;
    text-align:left;
    display:block;
    padding:10px 12px;
    border-radius:14px;
    cursor:pointer;
}
.osm-autocomplete__item:hover,
.osm-autocomplete__item.is-active{
    background:rgba(33,191,191,.10);
}
.osm-autocomplete__title{
    display:block;
    color:#0f172a;
    font-size:14px;
    font-weight:700;
    line-height:1.35;
}
.osm-autocomplete__subtitle{
    display:block;
    margin-top:2px;
    color:var(--muted, #64748b);
    font-size:12px;
    line-height:1.35;
}
.osm-autocomplete-placeholder{
    display:none;
}
body.sidebar-open .osm-autocomplete{
    display:none !important;
}



.search-wrap,
.global-search,
.vds-search,
.position-relative{
    overflow: visible;
}
.search-wrap:focus-within,
.global-search:focus-within,
.vds-search:focus-within,
.vds-auto-submit:focus-within,
.vds-filter-bar:focus-within{
    position: relative;
    z-index: 6500;
    overflow: visible !important;
}
.suggest-box,
.dt-suggest-box,
.vds-search-suggest,
.global-search-results,
.pos-results,
.autocomplete-items,
.osm-autocomplete,
.dropdown-menu.show{
    z-index: 7000 !important;
}
.report-card,
.report-card > .p-3,
.filter-card,
.filter-panel,
.card:has(.suggest-box),
.card:has(.dt-suggest-box),
.card:has(.vds-ac-panel),
.card:has(.global-search-results){
    overflow: visible !important;
}
.summary-grid,
.report-summary,
.table-responsive{
    position: relative;
    z-index: 1;
}




.pos-hh-thumb,
.hh-sug-thumb,
.vds-suggest-thumb,
.goods-suggest-thumb,
.product-suggest-thumb,
.service-suggest-thumb,
.item-suggest-thumb,
.search-result-thumb,
.product-search-thumb,
.service-search-thumb {
    width:92px !important;
    height:92px !important;
    min-width:92px !important;
    max-width:92px !important;
    flex:0 0 92px !important;
    border-radius:16px !important;
    overflow:hidden !important;
    background:#fff !important;
    border:1px solid rgba(0,0,0,.10) !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    color:#94a3b8 !important;
    font-size:28px !important;
}

.pos-hh-thumb img,
.hh-sug-thumb img,
.vds-suggest-thumb img,
.goods-suggest-thumb img,
.product-suggest-thumb img,
.service-suggest-thumb img,
.item-suggest-thumb img,
.search-result-thumb img,
.product-search-thumb img,
.service-search-thumb img {
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    max-height:none !important;
    object-fit:cover !important;
    object-position:center !important;
    display:block !important;
}

.pos-hh-thumb-fallback,
.hh-sug-thumb-fallback,
.vds-suggest-thumb .bi,
.goods-suggest-thumb .bi,
.product-suggest-thumb .bi,
.service-suggest-thumb .bi,
.item-suggest-thumb .bi {
    width:100% !important;
    height:100% !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    font-size:28px !important;
    line-height:1 !important;
}







@media (max-width: 767.98px) {
  body.modal-open {
    overflow: hidden !important;
    touch-action: none;
  }

  .modal.show {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .modal .modal-dialog,
  .modal.vds-unified-modal .modal-dialog,
  .vds-popup-modal .modal-dialog {
    width: calc(100% - 24px) !important;
    max-width: calc(100% - 24px) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 24px) !important;
    margin: 12px auto !important;
    padding: 0 !important;
    display: flex !important;
    align-items: stretch !important;
    pointer-events: none;
  }

  .modal .modal-content,
  .modal.vds-unified-modal .modal-content,
  .vds-popup-modal .modal-content {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 24px) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    pointer-events: auto;
  }

  .modal .modal-header,
  .modal .modal-footer,
  .modal.vds-unified-modal .modal-header,
  .modal.vds-unified-modal .modal-footer {
    flex: 0 0 auto !important;
  }

  .modal .modal-body,
  .modal.vds-unified-modal .modal-body,
  .vds-popup-modal .modal-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain;
    touch-action: pan-y !important;
  }

  .modal .modal-footer,
  .modal.vds-unified-modal .modal-footer {
    position: sticky;
    bottom: 0;
    z-index: 2;
    background: inherit;
  }

  .modal .modal-body .row,
  .modal .modal-body [class*="col-"] {
    min-height: 0;
  }
}

@supports not (height: 100dvh) {
  @media (max-width: 767.98px) {
    .modal .modal-dialog,
    .modal.vds-unified-modal .modal-dialog,
    .vds-popup-modal .modal-dialog,
    .modal .modal-content,
    .modal.vds-unified-modal .modal-content,
    .vds-popup-modal .modal-content {
      max-height: calc(100vh - 24px) !important;
    }
  }
}





#mdlLichHen .modal-dialog,
#modalLichHen .modal-dialog{
    --bs-modal-width: 500px;
    max-width: 500px;
}

#mdlLichHen .modal-content,
#modalLichHen .modal-content{
    border: var(--bs-modal-border-width) solid var(--bs-modal-border-color);
    border-radius: var(--bs-modal-border-radius);
    box-shadow: var(--bs-modal-box-shadow);
    background: #fff;
    overflow: hidden;
}

#mdlLichHen .modal-header,
#modalLichHen .modal-header{
    padding: var(--bs-modal-header-padding);
    border-bottom: var(--bs-modal-header-border-width) solid var(--bs-modal-header-border-color);
    background: #fff;
    align-items: center;
}

#mdlLichHen .modal-title,
#modalLichHen .modal-title{
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--bs-heading-color, inherit);
}

#mdlLichHen .modal-body,
#modalLichHen .modal-body{
    padding: var(--bs-modal-padding);
}

#mdlLichHen .modal-footer,
#modalLichHen .modal-footer{
    padding: calc(var(--bs-modal-padding) - var(--bs-modal-footer-gap) * .5);
    border-top: var(--bs-modal-footer-border-width) solid var(--bs-modal-footer-border-color);
    background: #fff;
    gap: var(--bs-modal-footer-gap);
}

#mdlLichHen .form-label,
#modalLichHen .form-label{
    font-size: .875rem;
    margin-bottom: .5rem;
}

#mdlLichHen .form-control,
#mdlLichHen .form-select,
#modalLichHen .form-control,
#modalLichHen .form-select{
    font-size: 1rem;
    padding: .375rem .75rem;
}

#mdlLichHen .form-check-label,
#modalLichHen .form-check-label{
    font-size: 1rem;
}

#mdlLichHen .slot-grid,
#modalLichHen .slot-grid{
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

#mdlLichHen .slot-btn,
#modalLichHen .slot-btn{
    border: 1px solid var(--bs-border-color, #dee2e6);
    background: #fff;
    border-radius: 8px;
    padding: 5px 8px;
    min-width: 96px;
    font-weight: 600;
    font-size: 13px;
}

#mdlLichHen .slot-btn.active,
#modalLichHen .slot-btn.active{
    background: #0d6efd;
    color: #fff;
    border-color: #0d6efd;
}

#mdlLichHen .lh-required:after,
#modalLichHen .lh-required:after{
    content: " *";
    color: #dc3545;
}





/* Action dropdowns are portaled to <body> by vds-action-dropdown-positioning.js.
   Keep table scrolling intact; do not enlarge the table or force overflow:visible. */
.table-responsive.vds-action-dropdown-surface{
    position:relative;
}

body > .vds-action-dropdown-portal-menu{
    z-index:120300 !important;
    max-width:min(360px, calc(100vw - 16px));
    max-height:calc(100vh - 16px) !important;
    overflow-x:hidden;
    overflow-y:auto !important;
    overscroll-behavior:contain;
    box-shadow:0 18px 48px rgba(15,23,42,.22);
}

body > .vds-action-dropdown-portal-menu.dropdown-menu-end{
    text-align:left;
}

@media (max-width: 767.98px){
    body > .vds-action-dropdown-portal-menu{
        width:min(360px, calc(100vw - 16px));
        min-width:min(280px, calc(100vw - 16px));
    }
}



/* VIETDESK VET enterprise mobile cards for Customer & Pet lists */
@media (max-width: 767.98px){
    .kh-shell,
    .pet-table-shell{
        border-radius:20px !important;
        overflow:visible !important;
        background:#fff !important;
        box-shadow:0 12px 32px rgba(15,23,42,.08) !important;
    }

    .kh-table-wrap,
    .pet-table-shell{
        overflow:visible !important;
        min-height:0 !important;
        padding-bottom:10px !important;
        border-top:0 !important;
    }

    .kh-table.vds-mobile-card-table,
    .pet-modern-table.vds-mobile-card-table{
        min-width:0 !important;
        width:100% !important;
        display:block !important;
        border-collapse:separate !important;
        background:transparent !important;
    }

    .kh-table.vds-mobile-card-table thead,
    .pet-modern-table.vds-mobile-card-table thead{
        display:none !important;
    }

    .kh-table.vds-mobile-card-table tbody,
    .pet-modern-table.vds-mobile-card-table tbody{
        display:block !important;
        padding:10px !important;
    }

    .kh-table.vds-mobile-card-table > tbody > tr,
    .pet-modern-table.vds-mobile-card-table > tbody > tr{
        display:block !important;
        width:100% !important;
        margin:0 0 14px !important;
        border:1px solid #e2e8f0 !important;
        border-radius:22px !important;
        overflow:visible !important;
        background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%) !important;
        box-shadow:0 12px 28px rgba(15,23,42,.07) !important;
    }

    .kh-table.vds-mobile-card-table > tbody > tr::before,
    .pet-modern-table.vds-mobile-card-table > tbody > tr::before{
        display:none !important;
    }

    .kh-table.vds-mobile-card-table > tbody > tr > td,
    .pet-modern-table.vds-mobile-card-table > tbody > tr > td{
        display:block !important;
        width:100% !important;
        padding:12px 14px !important;
        border:0 !important;
        border-bottom:1px solid #e8eef6 !important;
        background:transparent !important;
        text-align:left !important;
        white-space:normal !important;
    }

    .kh-table.vds-mobile-card-table > tbody > tr > td:last-child,
    .pet-modern-table.vds-mobile-card-table > tbody > tr > td:last-child{
        border-bottom:0 !important;
    }

    .kh-table.vds-mobile-card-table > tbody > tr > td[data-label]::before,
    .pet-modern-table.vds-mobile-card-table > tbody > tr > td[data-label]::before{
        content:attr(data-label) !important;
        display:block !important;
        margin:0 0 7px !important;
        color:#94a3b8 !important;
        font-size:11px !important;
        line-height:1.2 !important;
        font-weight:900 !important;
        letter-spacing:.12em !important;
        text-transform:uppercase !important;
    }

    .kh-table.vds-mobile-card-table > tbody > tr > td[data-card-primary="true"],
    .pet-modern-table.vds-mobile-card-table > tbody > tr > td[data-card-primary="true"]{
        padding:14px !important;
        border-radius:22px 22px 0 0 !important;
        background:linear-gradient(135deg,#eff6ff 0%,#ffffff 62%,#f0fdfa 100%) !important;
    }

    .kh-table.vds-mobile-card-table > tbody > tr > td[data-card-primary="true"]::before,
    .pet-modern-table.vds-mobile-card-table > tbody > tr > td[data-card-primary="true"]::before{
        color:#64748b !important;
    }

    .kh-customer,
    .pet-cell-main,
    .pet-owner-block,
    .kh-pet{
        align-items:flex-start !important;
        gap:12px !important;
        min-width:0 !important;
    }

    .kh-avatar-img,
    .kh-pet-avatar-img,
    .pet-avatar,
    .pet-owner-avatar{
        width:52px !important;
        height:52px !important;
        min-width:52px !important;
        border-radius:50% !important;
        object-fit:cover !important;
        box-shadow:0 10px 24px rgba(37,99,235,.10) !important;
    }

    .kh-name,
    .kh-code,
    .pet-table-name{
        font-size:15px !important;
        line-height:1.25 !important;
        font-weight:900 !important;
        color:#0969ff !important;
        overflow-wrap:anywhere !important;
        word-break:normal !important;
    }

    .kh-meta,
    .pet-muted,
    .pet-phone{
        font-size:13px !important;
        line-height:1.35 !important;
        color:#64748b !important;
        font-weight:700 !important;
        overflow-wrap:anywhere !important;
    }

    .kh-address{
        max-width:100% !important;
        font-size:14px !important;
        line-height:1.45 !important;
        color:#334155 !important;
    }

    .kh-pet-list{
        gap:10px !important;
    }

    .kh-pill,
    .pet-status,
    .kh-points{
        min-height:32px !important;
        display:inline-flex !important;
        align-items:center !important;
        justify-content:center !important;
        border-radius:999px !important;
        font-size:12px !important;
        font-weight:900 !important;
        padding:7px 12px !important;
    }

    .kh-points{
        border-radius:12px !important;
        background:#ffc107 !important;
        color:#0f172a !important;
        min-width:64px !important;
    }

    .pet-mobile-check{
        display:none !important;
    }

    .kh-table.vds-mobile-card-table .vds-mobile-action-cell,
    .pet-modern-table.vds-mobile-card-table .vds-mobile-action-cell{
        padding:12px 14px 14px !important;
        background:#f8fafc !important;
        border-radius:0 0 22px 22px !important;
        overflow:visible !important;
    }

    .kh-table.vds-mobile-card-table .vds-mobile-action-cell .dropdown,
    .pet-modern-table.vds-mobile-card-table .vds-mobile-action-cell .dropdown{
        position:relative !important;
        display:block !important;
        width:100% !important;
    }

    .kh-table.vds-mobile-card-table .vds-mobile-action-cell .table-action-trigger,
    .pet-modern-table.vds-mobile-card-table .vds-mobile-action-cell .table-action-trigger{
        width:100% !important;
        min-height:44px !important;
        height:44px !important;
        border-radius:14px !important;
        border:1px solid #dbe7f6 !important;
        background:#fff !important;
        color:#0f172a !important;
        display:inline-flex !important;
        align-items:center !important;
        justify-content:center !important;
        gap:8px !important;
        padding:0 14px !important;
        box-shadow:0 8px 18px rgba(15,23,42,.06) !important;
        text-decoration:none !important;
    }

    .kh-table.vds-mobile-card-table .vds-mobile-action-cell .table-action-trigger::before,
    .pet-modern-table.vds-mobile-card-table .vds-mobile-action-cell .table-action-trigger::before{
        content:"Thao tác";
        font-weight:900;
        font-size:14px;
    }

    .kh-table.vds-mobile-card-table .vds-mobile-action-cell .table-action-trigger i,
    .pet-modern-table.vds-mobile-card-table .vds-mobile-action-cell .table-action-trigger i{
        font-size:18px !important;
        line-height:1 !important;
    }

    .kh-table.vds-mobile-card-table .vds-mobile-action-cell .dropdown-menu,
    .pet-modern-table.vds-mobile-card-table .vds-mobile-action-cell .dropdown-menu{
        position:static !important;
        transform:none !important;
        width:100% !important;
        margin-top:10px !important;
        border:1px solid #e2e8f0 !important;
        border-radius:16px !important;
        box-shadow:0 14px 30px rgba(15,23,42,.12) !important;
        overflow:hidden !important;
    }

    .kh-table.vds-mobile-card-table .vds-mobile-action-cell .dropdown-menu:not(.show),
    .pet-modern-table.vds-mobile-card-table .vds-mobile-action-cell .dropdown-menu:not(.show){
        display:none !important;
    }

    .kh-table.vds-mobile-card-table .vds-mobile-action-cell .dropdown-item,
    .pet-modern-table.vds-mobile-card-table .vds-mobile-action-cell .dropdown-item{
        min-height:42px !important;
        display:flex !important;
        align-items:center !important;
        font-weight:700 !important;
        white-space:normal !important;
    }

    .kh-page,
    .pet-page-shell{
        padding-left:10px !important;
        padding-right:10px !important;
    }

    .kh-filterbar,
    .pet-filter-panel,
    .pet-search-row{
        border-radius:20px !important;
        gap:10px !important;
    }

    .kh-stats,
    .pet-stats-grid{
        gap:10px !important;
    }
}


/* VIETDESK VET production fix V7:
   Hard-lock authenticated topbar typography/spacing so page-specific styles
   (for example ThuCung inline styles) cannot make the header jump between routes. */
html body.app-body > .app-topbar{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    height:calc(var(--topbar-h) + env(safe-area-inset-top)) !important;
    min-height:calc(var(--topbar-h) + env(safe-area-inset-top)) !important;
    display:flex !important;
    align-items:center !important;
    gap:12px !important;
    padding:calc(10px + env(safe-area-inset-top)) 14px 10px !important;
    box-sizing:border-box !important;
    font-family:var(--vds-app-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji");
    line-height:1.2 !important;
}

html body.app-body > .app-topbar .app-title{
    flex:0 1 auto !important;
    min-width:0 !important;
    max-width:min(70vw,760px) !important;
    height:auto !important;
    margin:0 !important;
    padding:0 !important;
    display:inline-flex !important;
    align-items:center !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    font-family:var(--vds-app-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji");
    font-size:16.5px !important;
    font-weight:900 !important;
    line-height:1.2 !important;
    letter-spacing:.25px !important;
}

html body.app-body > .app-topbar .app-user{
    margin-left:auto !important;
    display:flex !important;
    align-items:center !important;
    gap:12px !important;
    min-width:0 !important;
    font-family:var(--vds-app-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji");
}

html body.app-body > .app-topbar .app-user .btn,
html body.app-body > .app-topbar .app-user button,
html body.app-body > .app-topbar .app-user .badge,
html body.app-body > .app-topbar .app-user .dropdown-toggle{
    font-family:var(--vds-app-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji");
    line-height:1.2 !important;
    box-sizing:border-box !important;
}

html body.app-body > .app-topbar .vds-notification-trigger{
    width:36px !important;
    height:36px !important;
    min-width:36px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:0 !important;
}

@media (max-width: 991.98px){
    html body.app-body > .app-topbar{
        gap:8px !important;
        padding:8px 10px !important;
    }
    html body.app-body > .app-topbar .app-title{
        flex:1 1 auto !important;
        font-size:12px !important;
    }
}


/* V8 font stability fix:
   The pet page loads Montserrat/Inter for the pet ID-card modal. Before this fix,
   app chrome used "Inter" in its fallback stack, so entering /pets could load
   Inter late and make the whole system appear to change font/size. Keep the core
   application UI on one local/system stack regardless of page-level @imports. */
html body.app-body{
    --bs-body-font-family:var(--vds-app-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji");
    font-family:var(--vds-app-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji");
    font-size: 14.5px;
    line-height: 1.45;
}

html body.app-body .app-topbar,
html body.app-body .app-sidebar,
html body.app-body .app-main,
html body.app-body .app-title,
html body.app-body .app-user,
html body.app-body .offcanvas,
html body.app-body .dropdown-menu,
html body.app-body .btn,
html body.app-body .form-control,
html body.app-body .form-select,
html body.app-body .modal:not(.pet-id-card-modal),
html body.app-body .swal2-popup{
    font-family:var(--vds-app-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji");
}

html body.app-body > .app-topbar .app-title{
    font-family:var(--vds-app-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji");
    font-size: 16.5px !important;
    line-height: 1.2 !important;
}


/* FIX MOBILE REALTIME NOTIFICATION:
   Keep realtime toast above the fixed mobile header/menu. */
@media (max-width: 767.98px) {
    .vds-toast-stack {
        top: calc(env(safe-area-inset-top) + 10px) !important;
        left: 10px !important;
        right: 10px !important;
        width: auto !important;
        z-index: 120500 !important;
    }

    .vds-toast {
        max-width: calc(100vw - 20px);
    }
}

@media (min-width: 768px) {
    .vds-toast-stack {
        z-index: 120500 !important;
    }
}

.vds-notification-dropdown {
    z-index: 120400 !important;
}


/* FIX: mobile notification popup must float above page content and below fixed header */
@media (max-width: 991.98px) {
    .vds-notification {
        position: static !important;
    }

    .vds-notification-dropdown {
        position: fixed !important;
        top: calc(var(--topbar-h) + env(safe-area-inset-top) + 10px) !important;
        left: 12px !important;
        right: 12px !important;
        bottom: auto !important;
        transform: none !important;
        width: auto !important;
        max-width: none !important;
        max-height: calc(100dvh - var(--topbar-h) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 24px) !important;
        border-radius: 22px !important;
        border: 1px solid #dfe7ef !important;
        box-shadow: 0 24px 70px rgba(15, 23, 42, .28) !important;
        z-index: 120500 !important;
        overflow: hidden !important;
        padding-bottom: 0 !important;
        animation: vdsNotificationMobileDropIn .18s ease-out !important;
    }

    .vds-notification-dropdown[hidden] {
        display: none !important;
    }

    .vds-notification-header {
        border-radius: 22px 22px 0 0 !important;
    }

    .vds-notification-header::before {
        display: none !important;
    }

    .vds-notification-tabs {
        top: 0 !important;
    }

    .vds-notification-list {
        max-height: calc(100dvh - var(--topbar-h) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 230px) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }
}

@keyframes vdsNotificationMobileDropIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* Fix KH mobile action menu: keep dropdown inside card so it follows its action button while scrolling. */
@media (max-width: 767.98px){
    .kh-table.vds-mobile-card-table .vds-mobile-action-cell,
    .kh-table.vds-mobile-card-table .vds-mobile-action-cell .dropdown{
        position:relative !important;
        overflow:visible !important;
    }
    .kh-table.vds-mobile-card-table .vds-mobile-action-cell .kh-customer-action-menu{
        position:static !important;
        inset:auto !important;
        transform:none !important;
        width:100% !important;
        min-width:0 !important;
        margin-top:10px !important;
        z-index:10 !important;
    }
    body > .kh-customer-action-menu.is-body-portal{
        position:static !important;
        transform:none !important;
    }
}


/* FIX Pet ID card modal:
   Keep the identification card popup at its designed desktop width.
   This modal is intentionally wider than Bootstrap's default 500px modal-dialog. */
#petIdCardModal.pet-id-card-modal,
#petIdCardModal.pet-id-card-modal .modal-dialog.modal-id-card{
    width:min(91vw,1325px) !important;
    max-width:min(91vw,1325px) !important;
    margin-left:auto !important;
    margin-right:auto !important;
}
#petIdCardModal.pet-id-card-modal .modal-content.pet-id-modal-content{
    width:100% !important;
    max-width:100% !important;
    overflow:visible !important;
    background:transparent !important;
    border:0 !important;
}
#petIdCardModal.pet-id-card-modal .pet-id-card-scroll{
    width:100% !important;
    max-width:100% !important;
    overflow:visible !important;
}
#petIdCardModal.pet-id-card-modal .pet-id-card-preview{
    width:min(1325px,88vw) !important;
    max-width:none !important;
    font-family:"Montserrat","Inter","Segoe UI",Arial,sans-serif !important;
}
@media (max-width:900px){
    #petIdCardModal.pet-id-card-modal,
    #petIdCardModal.pet-id-card-modal .modal-dialog.modal-id-card{
        width:100vw !important;
        max-width:100vw !important;
        margin:.5rem 0 !important;
    }
    #petIdCardModal.pet-id-card-modal .pet-id-card-scroll{
        width:100vw !important;
        max-width:100vw !important;
        overflow-x:auto !important;
        overflow-y:visible !important;
        justify-content:flex-start !important;
    }
    #petIdCardModal.pet-id-card-modal .pet-id-card-preview{
        width:1325px !important;
        min-width:1325px !important;
        transform:scale(.74) !important;
        transform-origin:top left !important;
    }
}


/* FIX: center Pet ID card modal in the viewport and remove dark outline */
.pet-id-card-modal{
    position:fixed!important;
    inset:0!important;
    width:100vw!important;
    height:100vh!important;
    padding:0!important;
    overflow:hidden!important;
}
.pet-id-card-modal .modal-dialog.modal-id-card{
    width:100vw!important;
    max-width:none!important;
    min-height:100vh!important;
    margin:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    transform:none!important;
}
.pet-id-card-modal .pet-id-modal-content{
    width:auto!important;
    max-width:calc(100vw - 32px)!important;
    margin:0 auto!important;
    border:0!important;
    outline:0!important;
    box-shadow:none!important;
    background:transparent!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    pointer-events:auto;
}
.pet-id-card-modal .pet-id-card-scroll{
    width:auto!important;
    max-width:calc(100vw - 32px)!important;
    margin:0 auto!important;
    padding:0!important;
    overflow:visible!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
}
.pet-id-card-modal .pet-id-card-preview{
    width:min(1325px, calc(100vw - 32px))!important;
    max-width:calc(100vw - 32px)!important;
    min-width:0!important;
    flex:0 1 auto!important;
    margin:0 auto!important;
    border:0!important;
    outline:0!important;
    box-shadow:0 20px 60px rgba(15,23,42,.22)!important;
}
.pet-id-card-modal .pet-card-close{
    position:absolute!important;
    top:18px!important;
    right:18px!important;
}
@media (max-width: 900px){
    .pet-id-card-modal{overflow:auto!important;}
    .pet-id-card-modal .modal-dialog.modal-id-card{
        min-height:100vh!important;
        align-items:flex-start!important;
        padding:12px 0!important;
    }
    .pet-id-card-modal .pet-id-card-scroll{
        overflow-x:auto!important;
        justify-content:flex-start!important;
        padding:0 16px 12px 16px!important;
    }
    .pet-id-card-modal .pet-id-card-preview{
        width:1325px!important;
        min-width:1325px!important;
        max-width:none!important;
        flex:0 0 1325px!important;
    }
    .pet-id-card-modal .pet-card-close{
        position:fixed!important;
        top:14px!important;
        right:14px!important;
    }
}



/* Header brand link: click to homepage */
.app-topbar a.app-title,
.app-topbar a.app-title:hover,
.app-topbar a.app-title:focus {
    text-decoration: none;
    cursor: pointer;
}


/* HOTFIX_AI_MOBILE_VISIBLE_OVERRIDE */
.ai-fab{ z-index:2147483000 !important; }
.ai-panel{ z-index:2147483000 !important; }
@media (max-width:575.98px){
    .ai-fab{ display:flex !important; position:fixed !important; right:calc(14px + env(safe-area-inset-right)) !important; bottom:calc(76px + env(safe-area-inset-bottom)) !important; width:56px !important; height:56px !important; }
    .ai-panel{ display:none; position:fixed !important; left:calc(8px + env(safe-area-inset-left)) !important; right:calc(8px + env(safe-area-inset-right)) !important; bottom:calc(142px + env(safe-area-inset-bottom)) !important; width:auto !important; height:min(620px, calc(100dvh - 168px)) !important; max-height:calc(100dvh - 168px) !important; }
    .ai-panel.show{ display:flex !important; }
}


.sidebar-plan-order-quota{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-left:auto;
    padding:3px 8px;
    border-radius:999px;
    background:#fef3c7;
    border:1px solid #f59e0b;
    color:#92400e;
    font-size:11px;
    font-weight:900;
    line-height:1.15;
    white-space:nowrap;
    box-shadow:0 4px 12px rgba(245,158,11,.16);
}

.pos-action-pay.is-plan-order-limit-reached{
    background:linear-gradient(90deg,#f59e0b,#d97706) !important;
    border-color:#d97706 !important;
    color:#fff !important;
    box-shadow:0 10px 24px rgba(217,119,6,.22);
}

/* Cấp phát số thứ tự - nút thao tác nhanh trên sidebar */
.sidebar-actions .btn-queue-ticket {
    color: #ffffff;
    background: linear-gradient(135deg, #8b5cf6, #6d28d9);
    border: 1px solid #6d28d9;
    font-weight: 800;
    box-shadow: 0 7px 16px rgba(109, 40, 217, 0.2);
}
.sidebar-actions .btn-queue-ticket:hover,
.sidebar-actions .btn-queue-ticket:focus,
.sidebar-actions .btn-queue-ticket.active {
    color: #ffffff;
    background: linear-gradient(135deg, #7c3aed, #5b21b6);
    border-color: #5b21b6;
}


/* VIETDESKVET V5 - unified application typography
   Keep every application screen and shared control on the same system font stack.
   Icon-font classes are deliberately excluded so Bootstrap/Font Awesome icons remain intact. */
:root {
    --vds-app-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans",
                    "Helvetica Neue", Arial, "Liberation Sans", sans-serif,
                    "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
    --bs-body-font-family: var(--vds-app-font);
}

html,
body.app-body {
    font-family: var(--vds-app-font) !important;
}

body.app-body :where(
    .app-shell, .app-topbar, .app-sidebar, .sidebar, .sidebar-actions,
    .app-main, .content-shell, main, section, article, header, footer, nav,
    .card, .modal, .modal-content, .offcanvas, .dropdown-menu, .popover,
    .tooltip, .toast, .alert, .table, .pagination, .breadcrumb, .nav, .navbar,
    .btn, button, input, select, textarea, label, option, optgroup,
    .form-control, .form-select, .input-group, .list-group,
    .queue-page, .queue-shell, .ticket-preview,
    .swal2-container, .swal2-popup
) {
    font-family: var(--vds-app-font) !important;
}

/* Normal text descendants inherit the component font; icon-font glyphs retain their own font. */
body.app-body :where(
    .app-topbar, .app-sidebar, .sidebar, .sidebar-actions, .app-main,
    .content-shell, .card, .modal-content, .offcanvas, .dropdown-menu,
    .table, .queue-page, .swal2-popup
) :where(a, span, div, p, small, strong, b, em, h1, h2, h3, h4, h5, h6, th, td, dt, dd)
:not(.bi):not([class^="bi-"]):not([class*=" bi-"])
:not(.fa):not(.fas):not(.far):not(.fal):not(.fab)
:not([class^="fa-"]):not([class*=" fa-"]) {
    font-family: inherit !important;
}

/* Sidebar quick actions use the exact same typography as the navigation controls. */
body.app-body .sidebar-actions .btn,
body.app-body .sidebar .nav-link {
    font-family: var(--vds-app-font) !important;
}


/* Pet ID card close/export control: keep it above the card at every viewport size. */
#petIdCardModal.pet-id-card-modal .pet-card-close{
    position:fixed!important;
    top:18px!important;
    right:18px!important;
    z-index:1085!important;
    width:42px!important;
    height:42px!important;
    padding:0!important;
    border:1px solid rgba(15,23,42,.18)!important;
    border-radius:999px!important;
    background-color:#fff!important;
    opacity:1!important;
    box-shadow:0 8px 24px rgba(15,23,42,.24)!important;
    background-size:16px 16px!important;
    pointer-events:auto!important;
}
#petIdCardModal.pet-id-card-modal .pet-card-close:hover,
#petIdCardModal.pet-id-card-modal .pet-card-close:focus{
    opacity:1!important;
    filter:none!important;
    box-shadow:0 8px 28px rgba(15,23,42,.32)!important;
}

/* Global action-dropdown portal v5: fixed to the viewport so no table/card/overflow
   ancestor can clip the action menu. Inline coordinates are supplied by JS. */
body > .vds-action-dropdown-portal-menu{
    position:fixed !important;
    inset:auto !important;
    right:auto !important;
    bottom:auto !important;
    transform:none !important;
    margin:0 !important;
    z-index:120300 !important;
    max-width:calc(100vw - 16px) !important;
    max-height:calc(100vh - 16px) !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    overscroll-behavior:contain;
    text-align:left;
}

/* Country flag shown for the active UI culture. */
.app-language-current-flag{display:inline-flex;align-items:center;justify-content:center;font-size:18px;line-height:1}

/* Veterinary treatment-order shortcut: keep the white/black appearance in every state. */
.sidebar-actions .btn-treatment-orders,
.sidebar-actions .btn-treatment-orders:hover,
.sidebar-actions .btn-treatment-orders:focus,
.sidebar-actions .btn-treatment-orders:active,
.sidebar-actions .btn-treatment-orders.active {
    color: #000;
    background: #fff;
    border: 1px solid #000;
}
.sidebar-actions .btn-treatment-orders:focus-visible {
    outline: 2px solid #000;
    outline-offset: 2px;
}