/* =========================================================
   P365 CRM — Aurora Theme (no build step)
   Filament v5 · primary #000080 (navy)
   Design rules: dark surfaces => light text. Light => ink text.
   ========================================================= */

:root {
    /* Một màu chủ đạo: NAVY #000080 + đen huyền bí */
    --vx-primary: #000080;
    --vx-primary-600: #00006b;
    --vx-primary-700: #000052;
    --vx-primary-bright: #2a2ad6;
    --vx-primary-soft: rgba(0, 0, 128, .09);
    --vx-primary-ring: rgba(0, 0, 128, .35);
    --vx-grad: linear-gradient(135deg, #000080 0%, #0a0a3f 100%);
    --vx-grad-vivid: linear-gradient(135deg, #1a1aa0 0%, #000080 60%, #07071f 100%);

    --vx-bg: #f5f6fa;
    --vx-surface: #ffffff;

    /* Text — đậm, dễ đọc trên nền sáng */
    --vx-ink: #0f1222;
    --vx-ink-strong: #06060f;
    --vx-ink-soft: #44485a;
    --vx-ink-faint: #6b7180;

    --vx-border: #e6e8f0;
    --vx-radius: 16px;
    --vx-radius-sm: 12px;
    --vx-radius-xs: 10px;

    --vx-shadow-sm: 0 1px 2px rgba(8, 8, 30, .06), 0 1px 3px rgba(8, 8, 30, .04);
    --vx-shadow: 0 6px 20px rgba(8, 8, 30, .08);
    --vx-shadow-lg: 0 16px 40px rgba(8, 8, 30, .16);
    --vx-glow: 0 .5rem 1.25rem rgba(0, 0, 128, .5);

    /* Sidebar: navy chuyển đen huyền bí — chữ luôn trắng */
    --vx-sidebar: linear-gradient(185deg, #000080 0%, #00004d 45%, #060617 100%);

    /* Dark mode surfaces */
    --vx-dark-bg: #0a0a18;
    --vx-dark-surface: #12122a;
    --vx-dark-border: rgba(255, 255, 255, .08);
    --vx-dark-text: #e7e8f4;
}

/* ---------- Nền & chữ chung ---------- */
.fi-body {
    background: var(--vx-bg) !important;
    color: var(--vx-ink);
}

.fi-main,
.fi-ta-text,
.fi-ta-cell,
.fi-in-text,
.fi-fo-field-wrp-label,
.fi-section-content {
    color: var(--vx-ink);
}

.dark .fi-body {
    background: var(--vx-dark-bg) !important;
    color: var(--vx-dark-text);
}

/* =========================================================
   SIDEBAR — nền indigo tối, chữ TRẮNG
   ========================================================= */
.fi-sidebar,
.fi-sidebar .fi-sidebar-nav {
    background: var(--vx-sidebar) !important;
    border-right: 0 !important;
    box-shadow: 0 0 2rem rgba(17, 16, 50, .5);
}

.fi-sidebar {
    width: 16.5rem;
}

.fi-sidebar-header-ctn,
.fi-sidebar-header {
    background: transparent !important;
    box-shadow: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, .1) !important;
}

.fi-sidebar-header {
    padding: 0 1.15rem;
    height: 4.25rem;
}

.fi-sidebar .fi-logo {
    color: #fff !important;
    font-weight: 800;
    letter-spacing: -.02em;
    font-size: 1.2rem;
}

/* Nút thu gọn / mở sidebar */
.fi-sidebar-close-collapse-sidebar-btn .fi-icon,
.fi-sidebar-close-collapse-sidebar-btn svg,
.fi-sidebar-open-collapse-sidebar-btn .fi-icon,
.fi-sidebar-open-collapse-sidebar-btn svg,
.fi-sidebar-group-collapse-btn .fi-icon,
.fi-sidebar-group-collapse-btn svg,
.fi-sidebar-collapse-btn .fi-icon,
.fi-sidebar-collapse-btn svg {
    color: rgba(255, 255, 255, .85) !important;
}

/* Nhãn nhóm menu */
.fi-sidebar-group-label {
    color: rgba(199, 196, 245, .65) !important;
    text-transform: uppercase;
    letter-spacing: .09em;
    font-size: .68rem;
    font-weight: 700;
}

/* Mục menu: chữ trắng + icon trắng */
.fi-sidebar-item-btn {
    border-radius: var(--vx-radius-xs) !important;
    margin: 3px .6rem;
    padding-top: .62rem !important;
    padding-bottom: .62rem !important;
    font-weight: 600;
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease, transform .12s ease;
}

.fi-sidebar-item-btn,
.fi-sidebar-item-label,
.fi-sidebar-item-btn .fi-sidebar-item-icon,
.fi-sidebar-item-btn .fi-icon,
.fi-sidebar-item-btn svg {
    color: rgba(255, 255, 255, .82) !important;
}

.fi-sidebar-item-btn:hover {
    background: rgba(255, 255, 255, .1) !important;
    transform: translateX(2px);
}

.fi-sidebar-item-btn:hover,
.fi-sidebar-item-btn:hover .fi-sidebar-item-label,
.fi-sidebar-item-btn:hover .fi-sidebar-item-icon,
.fi-sidebar-item-btn:hover svg {
    color: #fff !important;
}

/* Mục đang chọn = pill navy sáng có glow, chữ trắng */
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background: linear-gradient(90deg, #2a2ad6 0%, #4a4aff 100%) !important;
    box-shadow: 0 .4rem 1rem rgba(74, 74, 255, .5);
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn,
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-label,
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-icon,
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn svg {
    color: #fff !important;
    font-weight: 700;
}

/* Badge menu */
.fi-sidebar-item .fi-badge {
    background: #fb7185 !important;
    color: #fff !important;
    font-weight: 700;
}

/* ---------- Nút ĐĂNG XUẤT ghim đáy sidebar ---------- */
.vx-logout-wrap {
    margin-top: auto;
    padding: .65rem .6rem .85rem;
    border-top: 1px solid rgba(255, 255, 255, .1);
}

.vx-logout {
    display: flex;
    align-items: center;
    gap: .65rem;
    width: 100%;
    padding: .62rem .8rem;
    border-radius: var(--vx-radius-xs);
    color: #fff;
    font-weight: 600;
    font-size: .9rem;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    transition: background-color .15s ease, border-color .15s ease;
    cursor: pointer;
}

.vx-logout:hover {
    background: rgba(251, 113, 133, .9);
    border-color: transparent;
}

.vx-logout svg {
    width: 1.2rem;
    height: 1.2rem;
    flex-shrink: 0;
    color: #fff !important;
}

/* =========================================================
   TOPBAR
   ========================================================= */
.fi-topbar > nav {
    background: rgba(255, 255, 255, .82) !important;
    backdrop-filter: blur(12px);
    border: 1px solid var(--vx-border) !important;
    border-radius: 14px !important;
    box-shadow: var(--vx-shadow-sm);
    margin: .7rem .85rem 0;
}

.dark .fi-topbar > nav {
    background: rgba(37, 42, 64, .82) !important;
    border-color: var(--vx-dark-border) !important;
}

.fi-global-search .fi-input-wrp {
    border-radius: var(--vx-radius-xs) !important;
    background: rgba(0, 0, 128, .06) !important;
    border: 1px solid transparent !important;
}

.fi-global-search .fi-input-wrp:focus-within {
    border-color: var(--vx-primary-ring) !important;
}

.fi-topbar .fi-avatar,
.fi-topbar img.fi-avatar {
    border-radius: 50% !important;
    box-shadow: 0 0 0 2px var(--vx-primary-ring);
}

.fi-topbar .fi-dropdown-trigger .fi-btn,
.fi-topbar .fi-icon-btn {
    border-radius: var(--vx-radius-xs) !important;
}

/* Pill chỉ số ở topbar */
.vx-topbar-pill {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .45rem .85rem;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 700;
    color: var(--vx-primary-700);
    background: var(--vx-primary-soft);
    border: 1px solid var(--vx-primary-ring);
    white-space: nowrap;
}

.vx-topbar-pill svg {
    width: 1rem;
    height: 1rem;
}

/* =========================================================
   SECTION / CARD / WIDGET
   ========================================================= */
.fi-section,
.fi-wi-stats-overview-stat,
.fi-ta,
.fi-modal-window,
.fi-dropdown-panel {
    border-radius: var(--vx-radius) !important;
    border: 1px solid var(--vx-border) !important;
    box-shadow: var(--vx-shadow);
    background-color: var(--vx-surface);
}

.dark .fi-section,
.dark .fi-wi-stats-overview-stat,
.dark .fi-ta,
.dark .fi-modal-window,
.dark .fi-dropdown-panel {
    background-color: var(--vx-dark-surface);
    border-color: var(--vx-dark-border) !important;
}

.fi-section {
    transition: box-shadow .16s ease;
}

.fi-section:hover {
    box-shadow: var(--vx-shadow-lg);
}

.fi-section-header,
.fi-section-content {
    padding: 1.35rem 1.5rem !important;
}

.fi-section-header-heading {
    font-weight: 700;
    color: var(--vx-ink-strong);
    letter-spacing: -.01em;
}

.dark .fi-section-header-heading {
    color: var(--vx-dark-text);
}

.fi-section-header-description {
    color: var(--vx-ink-soft);
}

/* Thẻ thống kê */
.fi-wi-stats-overview-stat {
    padding: 1.4rem 1.5rem !important;
    transition: transform .16s ease, box-shadow .16s ease;
    position: relative;
    overflow: hidden;
}

.fi-wi-stats-overview-stat:hover {
    transform: translateY(-3px);
    box-shadow: 0 .75rem 1.75rem rgba(0, 0, 128, .2);
}

.fi-wi-stats-overview-stat-value {
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--vx-ink-strong);
}

.dark .fi-wi-stats-overview-stat-value {
    color: var(--vx-dark-text);
}

.fi-wi-stats-overview-stat-label {
    color: var(--vx-ink-soft);
    font-weight: 600;
}

.fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-icon,
.fi-wi-stats-overview-stat-description-icon {
    background: var(--vx-primary-soft);
    color: var(--vx-primary) !important;
    border-radius: var(--vx-radius-sm);
    padding: .45rem;
    width: 2.4rem;
    height: 2.4rem;
}

.fi-wi-chart .fi-wi-chart-header-heading,
.fi-wi-chart-header-heading {
    font-weight: 700;
    color: var(--vx-ink-strong);
    letter-spacing: -.01em;
}

.fi-wi {
    gap: 1.25rem;
}

/* =========================================================
   NÚT / BADGE / INPUT — luôn dễ đọc
   ========================================================= */
.fi-btn {
    border-radius: var(--vx-radius-xs) !important;
    font-weight: 600;
    transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
}

/* Nút primary: nền gradient tối => chữ TRẮNG */
.fi-btn.fi-color-primary,
.fi-btn[data-color="primary"] {
    background-image: var(--vx-grad);
    background-color: var(--vx-primary-600);
    border: 0;
    color: #fff !important;
    box-shadow: 0 .3rem .75rem rgba(0, 0, 128, .4);
}

.fi-btn.fi-color-primary:hover,
.fi-btn[data-color="primary"]:hover {
    transform: translateY(-1px);
    box-shadow: 0 .5rem 1.1rem rgba(0, 0, 128, .5);
    filter: brightness(1.04);
}

.fi-btn.fi-color-primary .fi-btn-label,
.fi-btn[data-color="primary"] .fi-btn-label,
.fi-btn.fi-color-primary svg,
.fi-btn[data-color="primary"] svg {
    color: #fff !important;
}

.fi-badge {
    border-radius: 8px !important;
    font-weight: 700;
}

.fi-input-wrp {
    border-radius: var(--vx-radius-xs) !important;
}

.fi-input-wrp:focus-within {
    box-shadow: 0 0 0 3px var(--vx-primary-soft);
}

/* =========================================================
   TIÊU ĐỀ & BẢNG
   ========================================================= */
.fi-header-heading {
    letter-spacing: -.02em;
    font-weight: 800;
    color: var(--vx-ink-strong);
}

.dark .fi-header-heading {
    color: var(--vx-dark-text);
}

.fi-ta-header-cell {
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: .72rem;
    color: var(--vx-ink-faint);
    font-weight: 700;
}

.fi-ta-cell,
.fi-ta-header-cell {
    padding-top: .9rem !important;
    padding-bottom: .9rem !important;
}

.fi-ta-row {
    transition: background-color .12s ease;
}

.fi-ta-row:hover {
    background-color: rgba(0, 0, 128, .05);
}

.fi-pagination .fi-btn,
.fi-pagination .fi-icon-btn {
    border-radius: 9px !important;
}

.fi-pagination .fi-btn.fi-active,
.fi-pagination [aria-current="page"] {
    background-image: var(--vx-grad);
    color: #fff !important;
    border: 0;
}

/* ---------- TABS dạng pill ---------- */
.fi-tabs {
    background: rgba(0, 0, 128, .07);
    padding: .28rem;
    border-radius: var(--vx-radius-sm);
    gap: .25rem;
}

.fi-tabs-item {
    border-radius: 9px !important;
    font-weight: 600;
    color: var(--vx-ink-soft) !important;
}

.fi-tabs-item.fi-active,
.fi-tabs-item[aria-selected="true"] {
    background: #fff !important;
    color: var(--vx-primary-700) !important;
    box-shadow: var(--vx-shadow-sm);
}

.dark .fi-tabs-item.fi-active,
.dark .fi-tabs-item[aria-selected="true"] {
    background: var(--vx-dark-bg) !important;
    color: #b7b9f5 !important;
}

/* Mobile: tabs nhiều mục (vd trang Cài đặt) cuộn ngang thay vì vỡ layout */
@media (max-width: 700px) {
    .fi-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    .fi-tabs-item {
        white-space: nowrap;
        flex: 0 0 auto;
    }
}

/* ---------- Dropdown ---------- */
.fi-dropdown-list-item {
    border-radius: 9px !important;
}

.fi-dropdown-list-item:hover {
    background: var(--vx-primary-soft) !important;
    color: var(--vx-primary-700) !important;
}

/* =========================================================
   WELCOME HERO BANNER
   ========================================================= */
.vx-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 2rem 2.25rem;
    border-radius: var(--vx-radius);
    background:
        radial-gradient(120% 120% at 0% 0%, #2a2ad6 0%, transparent 45%),
        linear-gradient(120deg, #000080 0%, #00004d 55%, #07071f 100%);
    color: #fff;
    box-shadow: 0 .75rem 2rem rgba(0, 0, 80, .45);
}

.vx-hero__hi {
    font-size: .92rem;
    opacity: .9;
    margin: 0;
}

.vx-hero__name {
    font-size: 1.7rem;
    font-weight: 800;
    letter-spacing: -.02em;
    margin: .1rem 0 .4rem;
    color: #fff;
}

.vx-hero__sub {
    font-size: .92rem;
    opacity: .9;
    margin: 0 0 1.35rem;
}

.vx-hero__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 2.25rem;
}

.vx-hero__stat {
    display: flex;
    flex-direction: column;
}

.vx-hero__val {
    font-size: 1.4rem;
    font-weight: 800;
    line-height: 1.1;
    color: #fff;
}

.vx-hero__lbl {
    font-size: .8rem;
    opacity: .85;
    margin-top: .2rem;
}

.vx-hero__art {
    position: relative;
    width: 190px;
    height: 140px;
    flex-shrink: 0;
}

.vx-hero__orb {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .6), rgba(255, 255, 255, .08) 60%, transparent 70%);
    box-shadow: inset 0 0 44px rgba(255, 255, 255, .3);
    animation: vx-float 6s ease-in-out infinite;
}

.vx-hero::after {
    content: "";
    position: absolute;
    right: -40px;
    bottom: -70px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
}

@keyframes vx-float {
    0%, 100% { transform: translateY(-50%); }
    50% { transform: translateY(-62%); }
}

@media (max-width: 768px) {
    .vx-hero__art { display: none; }
    .vx-hero__stats { gap: 1.4rem; }
}

/* =========================================================
   DASHBOARD LAUNCHER
   ========================================================= */
.vx-hero-card__icon svg { width: 1.65rem !important; height: 1.65rem !important; }
.vx-hero-card__btn svg { width: 1rem !important; height: 1rem !important; }
.vx-card__icon svg { width: 1.3rem !important; height: 1.3rem !important; }
.vx-card__chev { width: 1.15rem !important; height: 1.15rem !important; }

.vx-hero-card {
    display: flex;
    align-items: flex-start;
    gap: 1.35rem;
    padding: 1.6rem 1.85rem;
    border-radius: var(--vx-radius);
    background: linear-gradient(120deg, #eef0f8 0%, #e7e9f6 100%);
    border: 1px solid rgba(0, 0, 128, .16);
    box-shadow: 0 .4rem 1.2rem rgba(0, 0, 128, .1);
}

.dark .vx-hero-card {
    background: linear-gradient(120deg, #14143a 0%, #0d0d28 100%);
    border-color: rgba(74, 74, 255, .35);
}

.vx-hero-card__icon {
    flex-shrink: 0;
    width: 3.35rem;
    height: 3.35rem;
    display: grid;
    place-items: center;
    border-radius: var(--vx-radius-sm);
    color: #fff;
    background: var(--vx-grad);
    box-shadow: 0 .4rem .85rem rgba(0, 0, 128, .45);
}

.vx-hero-card__body {
    flex: 1;
    min-width: 0;
}

.vx-hero-card__eyebrow {
    margin: 0;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .08em;
    color: var(--vx-primary-700);
}

.vx-hero-card__title {
    margin: .15rem 0 .4rem;
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--vx-ink-strong);
}

.dark .vx-hero-card__title {
    color: #f0eefb;
}

.vx-hero-card__desc {
    margin: 0 0 .9rem;
    font-size: .92rem;
    color: var(--vx-ink-soft);
    max-width: 62ch;
}

.dark .vx-hero-card__desc {
    color: #c2c4dd;
}

.vx-hero-card__steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .45rem;
}

.vx-hero-card__steps li {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .88rem;
    color: var(--vx-ink);
}

.dark .vx-hero-card__steps li {
    color: #d7d8ec;
}

.vx-hero-card__steps li span {
    flex-shrink: 0;
    width: 1.4rem;
    height: 1.4rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: .72rem;
    font-weight: 700;
    color: #fff;
    background: var(--vx-grad);
}

/* Nút hero: nền gradient => chữ trắng */
.vx-hero-card__btn {
    flex-shrink: 0;
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .7rem 1.2rem;
    border-radius: var(--vx-radius-xs);
    font-weight: 700;
    font-size: .9rem;
    color: #fff;
    background: var(--vx-grad);
    box-shadow: 0 .35rem .8rem rgba(0, 0, 128, .45);
    transition: transform .14s ease, box-shadow .14s ease;
    white-space: nowrap;
}

.vx-hero-card__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 .6rem 1.2rem rgba(0, 0, 128, .55);
}

/* Mobile: xếp dọc để nội dung không bị nút CTA chèn ép (vỡ chữ từng từ) */
@media (max-width: 700px) {
    .vx-hero-card {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
        padding: 1.3rem 1.25rem;
    }
    .vx-hero-card__btn {
        align-self: stretch;
        justify-content: center;
    }
    .vx-hero-card__title { font-size: 1.18rem; }
    .vx-hero-card__desc { font-size: .88rem; }
}

.vx-section-label {
    margin: 1.7rem 0 .8rem;
    font-size: .78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--vx-ink-faint);
    display: flex;
    align-items: center;
    gap: .6rem;
}

.vx-section-label::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--vx-border);
}

.dark .vx-section-label::after {
    background: var(--vx-dark-border);
}

/* Lưới thẻ module */
.vx-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.vx-grid--wide {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 1024px) {
    .vx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .vx-grid,
    .vx-grid--wide { grid-template-columns: 1fr; }
}

/* Thẻ module */
.vx-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: .95rem;
    padding: 1.1rem 1.2rem;
    border-radius: var(--vx-radius);
    background: var(--vx-surface);
    border: 1px solid var(--vx-border);
    box-shadow: var(--vx-shadow-sm);
    overflow: hidden;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.vx-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--vx-grad);
    opacity: 0;
    transition: opacity .15s ease;
}

.dark .vx-card {
    background: var(--vx-dark-surface);
    border-color: var(--vx-dark-border);
}

.vx-card:hover {
    transform: translateY(-3px);
    border-color: rgba(0, 0, 128, .45);
    box-shadow: 0 .7rem 1.6rem rgba(0, 0, 128, .2);
}

.vx-card:hover::before {
    opacity: 1;
}

.vx-card__icon {
    flex-shrink: 0;
    width: 2.8rem;
    height: 2.8rem;
    display: grid;
    place-items: center;
    border-radius: var(--vx-radius-sm);
    color: var(--vx-primary);
    background: var(--vx-primary-soft);
    transition: background .15s ease, color .15s ease;
}

.vx-card:hover .vx-card__icon {
    background: var(--vx-grad);
    color: #fff;
}

.vx-card__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.vx-card__title {
    font-weight: 700;
    font-size: .96rem;
    color: var(--vx-ink-strong);
    line-height: 1.2;
}

.dark .vx-card__title {
    color: #eceafa;
}

.vx-card__sub {
    font-size: .8rem;
    color: var(--vx-ink-soft);
    margin-top: .18rem;
}

.dark .vx-card__sub {
    color: #b9bbd6;
}

.vx-card__chev {
    flex-shrink: 0;
    color: #b6b8cf;
    transition: transform .15s ease, color .15s ease;
}

.vx-card:hover .vx-card__chev {
    color: var(--vx-primary);
    transform: translateX(4px);
}

/* =========================================================
   TRANG ĐĂNG NHẬP
   ========================================================= */
.fi-simple-layout {
    background:
        radial-gradient(1000px 700px at 110% -10%, rgba(0, 0, 128, .26), transparent 55%),
        radial-gradient(900px 700px at -10% 110%, rgba(7, 7, 31, .2), transparent 55%),
        var(--vx-bg);
}

.fi-simple-main {
    border-radius: 20px !important;
    border: 1px solid var(--vx-border) !important;
    box-shadow: var(--vx-shadow-lg);
    background-color: #fff;
}

.dark .fi-simple-main {
    background-color: var(--vx-dark-surface);
    border-color: var(--vx-dark-border) !important;
}

/* =========================================================
   BẢNG PIPELINE (Kanban)
   ========================================================= */
.vx-pipeline {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: .85rem;
    align-items: flex-start;
}

.vx-pipe-col {
    flex: 0 0 280px;
    background: #eef0f8;
    border-radius: var(--vx-radius);
    padding: .65rem;
    box-shadow: var(--vx-shadow-sm);
}

.dark .vx-pipe-col {
    background: #20243a;
}

.vx-pipe-col__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 700;
    color: #fff;
    padding: .55rem .8rem;
    border-radius: var(--vx-radius-xs);
    background: var(--vx-primary);
}

/* Header cột: thang đơn sắc navy → đen, chữ trắng */
.vx-pipe-col__head.vx-pipe-new { background: #6b7280; }
.vx-pipe-col__head.vx-pipe-quote { background: #3f4a78; }
.vx-pipe-col__head.vx-pipe-negotiation { background: #1a1aa0; }
.vx-pipe-col__head.vx-pipe-won { background: #000080; }
.vx-pipe-col__head.vx-pipe-lost { background: #11131f; }

.vx-pipe-col__count {
    background: rgba(255, 255, 255, .3);
    border-radius: 999px;
    padding: 0 .55rem;
    font-size: .8rem;
    color: #fff;
}

.vx-pipe-col__sum {
    font-size: .78rem;
    font-weight: 700;
    color: var(--vx-ink-soft);
    padding: .45rem .3rem .15rem;
}

.dark .vx-pipe-col__sum {
    color: #b9bbd6;
}

.vx-pipe-col__body {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    margin-top: .4rem;
    min-height: 40px;
}

.vx-deal-card {
    background: #fff;
    border-radius: var(--vx-radius-xs);
    padding: .65rem .75rem;
    box-shadow: 0 1px 3px rgba(20, 19, 46, .08);
    border: 1px solid var(--vx-border);
    transition: box-shadow .14s ease, transform .14s ease;
}

.vx-deal-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--vx-shadow);
}

.dark .vx-deal-card {
    background: var(--vx-dark-surface);
    border-color: var(--vx-dark-border);
}

.vx-deal-card__title {
    display: block;
    font-weight: 700;
    color: var(--vx-ink-strong) !important;
    font-size: .88rem;
    text-decoration: none;
    margin-bottom: .35rem;
}

.dark .vx-deal-card__title {
    color: #eceafa !important;
}

.vx-deal-card__title:hover { color: var(--vx-primary) !important; }

.vx-deal-card__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .4rem;
    font-size: .76rem;
    color: var(--vx-ink-soft);
}

.vx-deal-card__actions {
    display: flex;
    justify-content: flex-end;
    gap: .35rem;
    margin-top: .55rem;
}

.vx-deal-btn {
    border: 1px solid #d4d6ec;
    background: #eef0f8;
    color: var(--vx-primary-700);
    border-radius: 8px;
    width: 30px;
    height: 26px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .15s ease;
}

.vx-deal-btn:hover { background: #dde0f1; }
.vx-deal-btn--fwd { background: var(--vx-primary); color: #fff; border-color: var(--vx-primary); }
.vx-deal-btn--fwd:hover { background: var(--vx-primary-600); }

.vx-pipe-empty {
    text-align: center;
    color: #9b97b3;
    font-size: .8rem;
    padding: .8rem 0;
}