body.liquid-ui-lite:not(.liquid-ui-exempt) {
  --liquid-lite-surface: rgba(255, 255, 255, 0.7);
  --liquid-lite-surface-strong: rgba(255, 255, 255, 0.88);
  --liquid-lite-surface-soft: rgba(255, 255, 255, 0.56);
  --liquid-lite-border: rgba(var(--bs-primary-rgb), 0.18);
  --liquid-lite-border-neutral: rgba(67, 89, 113, 0.14);
  --liquid-lite-highlight: rgba(255, 255, 255, 0.82);
  --liquid-lite-shadow: 0 0.35rem 1rem rgba(67, 89, 113, 0.08);
  --liquid-lite-shadow-sm: 0 0.18rem 0.55rem rgba(67, 89, 113, 0.06);
  --liquid-lite-shadow-focus: 0 0 0 0.18rem rgba(var(--bs-primary-rgb), 0.14);
  --liquid-lite-blur: none;
  --liquid-lite-radius: 0.5rem;
  background:
    linear-gradient(180deg, rgba(var(--bs-primary-rgb), 0.055), rgba(255, 255, 255, 0) 18rem),
    linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(var(--bs-primary-rgb), 0.035) 42%, rgba(255, 255, 255, 0.34)),
    var(--bs-body-bg);
  color: var(--bs-body-color);
}

body.liquid-ui-lite:not(.liquid-ui-exempt) .layout-page,
body.liquid-ui-lite:not(.liquid-ui-exempt) .content-wrapper {
  background: transparent;
}

body.liquid-ui-lite:not(.liquid-ui-exempt) .layout-page-title {
  margin-bottom: 1rem;
}

body.liquid-ui-lite:not(.liquid-ui-exempt) .layout-page-title h4 {
  margin-bottom: 0;
  color: var(--bs-heading-color, var(--bs-body-color));
  font-weight: 700;
}

body.liquid-ui-lite:not(.liquid-ui-exempt) :where(.modal-content, .dropdown-menu, .offcanvas, .accordion-item, .list-group, .dt-button-collection) {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.66)),
    var(--bs-card-bg);
  border-color: var(--liquid-lite-border-neutral);
  box-shadow:
    inset 0 1px 0 var(--liquid-lite-highlight),
    inset 0 -1px 0 rgba(var(--bs-primary-rgb), 0.035),
    var(--liquid-lite-shadow);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.liquid-ui-lite:not(.liquid-ui-exempt) .modal-content {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.94)),
    var(--bs-modal-bg, var(--bs-card-bg));
  border-color: rgba(67, 89, 113, 0.16);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 1rem 2.6rem rgba(67, 89, 113, 0.18);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.liquid-ui-lite:not(.liquid-ui-exempt) .modal-header,
body.liquid-ui-lite:not(.liquid-ui-exempt) .modal-footer {
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(67, 89, 113, 0.12);
}

body.liquid-ui-lite:not(.liquid-ui-exempt) .modal-body {
  background: rgba(255, 255, 255, 0.52);
}

body.liquid-ui-lite:not(.liquid-ui-exempt) .modal-content :where(.form-control:not(.btn), .form-select, .input-group-text, .select2-container--default .select2-selection) {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.9)),
    var(--bs-card-bg);
  border-color: rgba(67, 89, 113, 0.2);
}

body.liquid-ui-lite:not(.liquid-ui-exempt) .card {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.liquid-ui-lite:not(.liquid-ui-exempt) :where(.modal-content, .offcanvas)::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(var(--bs-primary-rgb), 0), rgba(var(--bs-primary-rgb), 0.2), rgba(255, 255, 255, 0.8), rgba(var(--bs-primary-rgb), 0));
  pointer-events: none;
}

body.liquid-ui-lite:not(.liquid-ui-exempt) :where(.modal-content, .dropdown-menu, .offcanvas, .accordion-item, .list-group) {
  position: relative;
}

body.liquid-ui-lite:not(.liquid-ui-exempt) .legacy-collapse-filter-panel {
  position: absolute;
  width: min(1000px, calc(100vw - 2rem));
  z-index: 2050;
}

body.liquid-ui-lite:not(.liquid-ui-exempt) .datatable-filter-slot {
  flex: 0 0 auto;
}

body.liquid-ui-lite:not(.liquid-ui-exempt) .card {
  background-color: rgba(255, 255, 255, 0.86);
  background-image: none;
  border: 1px solid var(--liquid-lite-border);
  border-radius: var(--liquid-lite-radius);
  box-shadow:
    inset 0 1px 0 var(--liquid-lite-highlight),
    0 0.18rem 0.65rem rgba(67, 89, 113, 0.06);
}

body.liquid-ui-lite:not(.liquid-ui-exempt) .sale-summary-card {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.82)),
    var(--bs-card-bg);
  border: 1px solid rgba(var(--bs-primary-rgb), 0.16);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    0 0.45rem 1.15rem rgba(67, 89, 113, 0.09);
}

body.liquid-ui-lite:not(.liquid-ui-exempt) .sale-summary-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(var(--bs-primary-rgb), 0.08), rgba(255, 255, 255, 0.86), rgba(var(--bs-primary-rgb), 0.16));
  pointer-events: none;
}

body.liquid-ui-lite:not(.liquid-ui-exempt) .sale-summary-icon {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 0.25rem 0.7rem rgba(67, 89, 113, 0.08);
}

body.liquid-ui-lite:not(.liquid-ui-exempt) .collapsing {
  overflow: hidden !important;
  transition-property: height !important;
  transition-duration: 0.35s !important;
  transition-timing-function: ease !important;
  will-change: height;
  contain: paint;
}

body.liquid-ui-lite:not(.liquid-ui-exempt) .collapsing * {
  transition: none !important;
}

body.liquid-ui-lite:not(.liquid-ui-exempt) .collapsing :where(.card, .card-body, .form-control, .form-select, .input-group-text, .select2-selection, .btn, .dropdown-menu, .table, .dataTables_wrapper, .page-link) {
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Keep Bootstrap collapse regions light. Height animation stutters when clipped
   content has layered gradients, shadows, or filters. */
body.liquid-ui-lite:not(.liquid-ui-exempt) :where(.collapse, .collapsing) :where(.card, .card-body, .dropdown-menu, .accordion-item, .list-group, .dataTables_wrapper, .dt-scroll, .dt-container) {
  background-image: none !important;
  background-color: var(--bs-card-bg) !important;
  border-color: var(--bs-border-color) !important;
  box-shadow: none !important;
  filter: none !important;
}

body.liquid-ui-lite:not(.liquid-ui-exempt) :where(.collapse, .collapsing) :where(.form-control:not(.btn), .form-select, .input-group-text, .select2-container--default .select2-selection, .select2-container--default .select2-selection--single, .select2-container--default .select2-selection--multiple, .bootstrap-select > .dropdown-toggle, .flatpickr-input) {
  background-image: none !important;
  /* Inputs inside a collapse must stay white like every other form field —
     --bs-body-bg (#f5f5f9) made them look greyed-out/disabled. Match the card. */
  background-color: var(--bs-card-bg) !important;
  border-color: var(--bs-border-color) !important;
  box-shadow: none !important;
  filter: none !important;
}

body.liquid-ui-lite:not(.liquid-ui-exempt) :where(.collapse, .collapsing) :where(.btn:not(.btn-link):not(.btn-text), .page-link, .pagination .dt-paging-button, .dt-paging .dt-paging-button) {
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
}

body.liquid-ui-lite:not(.liquid-ui-exempt) :where(.collapse, .collapsing) :where(.table thead, table.dataTable thead, .nav-tabs .nav-link.active, .nav-pills .nav-link.active) {
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
}

body.liquid-ui-lite:not(.liquid-ui-exempt) .card-header,
body.liquid-ui-lite:not(.liquid-ui-exempt) .card-footer {
  background-color: rgba(255, 255, 255, 0.5);
  border-color: rgba(67, 89, 113, 0.1);
}

body.liquid-ui-lite:not(.liquid-ui-exempt) #layout-navbar {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.64)) !important;
  border-bottom: 1px solid rgba(67, 89, 113, 0.1);
  box-shadow: inset 0 1px 0 var(--liquid-lite-highlight), 0 0.45rem 1.35rem rgba(67, 89, 113, 0.08);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

@media (min-width: 1200px) {
  body.liquid-ui-lite:not(.liquid-ui-exempt) .desktop-icon-sidebar {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.58));
    border-right-color: rgba(67, 89, 113, 0.1);
    box-shadow: inset 1px 0 0 var(--liquid-lite-highlight), 0.35rem 0 1.5rem rgba(67, 89, 113, 0.08);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  body.liquid-ui-lite:not(.liquid-ui-exempt) .desktop-scoped-inner {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.5));
    border-bottom: 1px solid rgba(var(--bs-primary-rgb), 0.1);
    box-shadow: inset 0 1px 0 var(--liquid-lite-highlight), 0 0.5rem 1.25rem rgba(67, 89, 113, 0.06);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  body.liquid-ui-lite:not(.liquid-ui-exempt) .desktop-sidebar-item,
  body.liquid-ui-lite:not(.liquid-ui-exempt) .desktop-scoped-link,
  body.liquid-ui-lite:not(.liquid-ui-exempt) .desktop-scoped-submenu-link {
    border-color: rgba(67, 89, 113, 0.08);
  }

  body.liquid-ui-lite:not(.liquid-ui-exempt) .desktop-sidebar-item.active,
  body.liquid-ui-lite:not(.liquid-ui-exempt) .desktop-scoped-link.active,
  body.liquid-ui-lite:not(.liquid-ui-exempt) .desktop-scoped-submenu-link.active {
    box-shadow: 0 0.45rem 1.25rem rgba(var(--bs-primary-rgb), 0.16);
  }
}

body.liquid-ui-lite:not(.liquid-ui-exempt) .btn:not(.btn-link):not(.btn-text) {
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0)),
    linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34), 0 0.28rem 0.8rem rgba(67, 89, 113, 0.09);
}

body.liquid-ui-lite:not(.liquid-ui-exempt) .btn:hover,
body.liquid-ui-lite:not(.liquid-ui-exempt) .btn:focus {
  box-shadow: 0 0.35rem 1rem rgba(67, 89, 113, 0.11);
}

body.liquid-ui-lite:not(.liquid-ui-exempt) :where(.form-control:not(.btn), .form-select, .input-group-text, .select2-container--default .select2-selection, .select2-container--default .select2-selection--single, .select2-container--default .select2-selection--multiple, .bootstrap-select > .dropdown-toggle, .flatpickr-input, .daterangepicker, .flatpickr-calendar) {
  background:
    radial-gradient(circle at 18% 0, rgba(255, 255, 255, 0.9), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.74)),
    var(--bs-card-bg);
  border-color: rgba(var(--bs-primary-rgb), 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    inset 0 -1px 0 rgba(var(--bs-primary-rgb), 0.04),
    0 0.15rem 0.55rem rgba(67, 89, 113, 0.045);
}

body.liquid-ui-lite:not(.liquid-ui-exempt) :where(.form-control:not(.btn), .form-select, .select2-container--default .select2-selection, .bootstrap-select > .dropdown-toggle):focus,
body.liquid-ui-lite:not(.liquid-ui-exempt) .select2-container--default.select2-container--focus .select2-selection,
body.liquid-ui-lite:not(.liquid-ui-exempt) .select2-container--default.select2-container--open .select2-selection {
  background:
    radial-gradient(circle at 14% 0, rgba(255, 255, 255, 0.95), transparent 36%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(var(--bs-primary-rgb), 0.035)),
    var(--bs-card-bg);
  border-color: rgba(var(--bs-primary-rgb), 0.48);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 0 0 0.16rem rgba(var(--bs-primary-rgb), 0.11),
    0 0.35rem 1rem rgba(67, 89, 113, 0.08);
}

body.liquid-ui-lite:not(.liquid-ui-exempt) .input-group:focus-within {
  border-radius: var(--bs-border-radius);
  box-shadow: 0 0 0 0.16rem rgba(var(--bs-primary-rgb), 0.08);
}

body.liquid-ui-lite:not(.liquid-ui-exempt) :where(.select2-dropdown, .flatpickr-calendar, .daterangepicker, .bootstrap-select .dropdown-menu) {
  background:
    linear-gradient(155deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.82) 64%, rgba(var(--bs-primary-rgb), 0.055)),
    var(--bs-card-bg);
  border-color: var(--liquid-lite-border-neutral);
  box-shadow: inset 0 1px 0 var(--liquid-lite-highlight), 0 0.9rem 2rem rgba(67, 89, 113, 0.16);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.liquid-ui-lite:not(.liquid-ui-exempt) :where(.select2-dropdown, .bootstrap-select .dropdown-menu, .dropdown-menu) {
  background: var(--bs-card-bg, #fff) !important;
  color: var(--bs-body-color) !important;
}

body.liquid-ui-lite:not(.liquid-ui-exempt) :where(.select2-results__option, .dropdown-item, .bootstrap-select .dropdown-menu li a) {
  color: var(--bs-body-color) !important;
}

body.liquid-ui-lite:not(.liquid-ui-exempt) :where(.select2-results__option[aria-selected="true"], .dropdown-item.active, .dropdown-item:active) {
  background-color: rgba(var(--bs-primary-rgb), 0.12) !important;
  color: var(--bs-body-color) !important;
}

/* Danger dropdown items (e.g. "Xóa"): the generic .dropdown-item rules above
   force body color with !important, which kills .text-danger. Restore the red
   and give a soft red hover so a destructive action reads clearly without an icon. */
body.liquid-ui-lite:not(.liquid-ui-exempt) .dropdown-item.text-danger {
  color: #ff3e1d !important;
}
body.liquid-ui-lite:not(.liquid-ui-exempt) .dropdown-item.text-danger:hover,
body.liquid-ui-lite:not(.liquid-ui-exempt) .dropdown-item.text-danger:focus,
body.liquid-ui-lite:not(.liquid-ui-exempt) .dropdown-item.text-danger:active {
  background-color: rgba(255, 62, 29, 0.12) !important;
  color: #ff3e1d !important;
}

body.liquid-ui-lite:not(.liquid-ui-exempt) .flatpickr-calendar.open,
body.liquid-ui-lite:not(.liquid-ui-exempt) .daterangepicker,
body.liquid-ui-lite:not(.liquid-ui-exempt) .select2-container--open .select2-dropdown,
body.liquid-ui-lite:not(.liquid-ui-exempt) .bootstrap-select.bs-container .dropdown-menu {
  z-index: 3000 !important;
}

body.liquid-ui-lite:not(.liquid-ui-exempt) .dropdown-menu.show {
  z-index: 1105;
}

body.liquid-ui-lite:not(.liquid-ui-exempt) .dropdown-item:hover,
body.liquid-ui-lite:not(.liquid-ui-exempt) .dropdown-item:focus,
body.liquid-ui-lite:not(.liquid-ui-exempt) .select2-results__option--highlighted,
body.liquid-ui-lite:not(.liquid-ui-exempt) .flatpickr-day:hover {
  background-color: rgba(var(--bs-primary-rgb), 0.08);
  color: var(--bs-body-color);
}

body.liquid-ui-lite:not(.liquid-ui-exempt) :where(.table-responsive, .dataTables_wrapper, .dt-scroll, .dt-container) {
  border-radius: var(--liquid-lite-radius);
}

body.liquid-ui-lite:not(.liquid-ui-exempt) .table {
  --bs-table-bg: transparent;
  --bs-table-striped-bg: rgba(var(--bs-primary-rgb), 0.025);
  --bs-table-hover-bg: rgba(var(--bs-primary-rgb), 0.055);
  border-color: rgba(67, 89, 113, 0.09);
}

body.liquid-ui-lite:not(.liquid-ui-exempt) .table thead,
body.liquid-ui-lite:not(.liquid-ui-exempt) table.dataTable thead {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(var(--bs-primary-rgb), 0.055)),
    rgba(255, 255, 255, 0.82);
}

body.liquid-ui-lite:not(.liquid-ui-exempt) .table thead th,
body.liquid-ui-lite:not(.liquid-ui-exempt) table.dataTable thead th {
  border-bottom-color: rgba(var(--bs-primary-rgb), 0.15);
  color: var(--bs-body-color);
}

body.liquid-ui-lite:not(.liquid-ui-exempt) :where(.page-link, .pagination .dt-paging-button, .dt-paging .dt-paging-button) {
  background-color: rgba(255, 255, 255, 0.76);
  border-color: rgba(67, 89, 113, 0.11);
  box-shadow: var(--liquid-lite-shadow-sm);
}

body.liquid-ui-lite:not(.liquid-ui-exempt) .page-item.active .page-link,
body.liquid-ui-lite:not(.liquid-ui-exempt) .dt-paging .dt-paging-button.current {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0));
  box-shadow: 0 0.35rem 1rem rgba(var(--bs-primary-rgb), 0.16);
}

body.liquid-ui-lite:not(.liquid-ui-exempt) :where(.nav-tabs, .nav-pills) .nav-link {
  border-color: rgba(67, 89, 113, 0.08);
}

body.liquid-ui-lite:not(.liquid-ui-exempt) :where(.nav-tabs, .nav-pills) .nav-link.active {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.68)),
    rgba(var(--bs-primary-rgb), 0.08);
  border-color: rgba(var(--bs-primary-rgb), 0.16);
  color: var(--bs-primary) !important;
  box-shadow: 0 0.3rem 0.9rem rgba(var(--bs-primary-rgb), 0.12);
}

body.liquid-ui-lite:not(.liquid-ui-exempt) :where(.nav-tabs, .nav-pills) .nav-link.active :where(i, span) {
  color: inherit !important;
}

body.liquid-ui-lite:not(.liquid-ui-exempt) :where(.alert, .badge, .toast) {
  box-shadow: var(--liquid-lite-shadow-sm);
}

body.liquid-ui-lite:not(.liquid-ui-exempt) .apexcharts-bar-series .apexcharts-bar-area {
  filter: drop-shadow(0 3px 3px rgba(67, 89, 113, 0.12));
}

body.liquid-ui-lite:not(.liquid-ui-exempt) canvas {
  border-radius: var(--liquid-lite-radius);
}

/*
 * Flatpickr `altInput: true` inside a Bootstrap .input-group.
 * The visible field is flatpickr's alt input (class "form-control input"), NOT the
 * original ".flatpickr-input" (which is set to type=hidden). The theme's seam rules only
 * collapse the radius of ".flatpickr-input", so the visible field keeps its full pill
 * shape and the leading calendar icon (.input-group-text) looks detached from it.
 * Re-collapse the seam on the actual visible control so the icon connects to the field.
 */
.input-group > .flatpickr-wrapper:not(:first-child) > .form-control {
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}
.input-group > .flatpickr-wrapper:not(:last-child) > .form-control {
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}