@charset "UTF-8";

/* src/styles.scss */
:root {
  --mdc-theme-primary: #ccc;
  --text-size-tn: .9rem;
  --font-sans-serif:
    "Inter",
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    "Noto Sans",
    "Liberation Sans",
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol",
    "Noto Color Emoji";
  --body-bg: #f2f2f6;
  --main-color: #F35C86;
  --hover-color: #ff4f81;
}
.mw-400px {
  max-width: 320px;
}
.mb-2_5 {
  margin-bottom: 1rem !important;
}
.ms-6 {
  margin-left: 4.5rem !important;
}
#bodyModalDetailAnn {
  overflow-y: auto;
  height: 85vh;
}
#bodyModalDetailAnn img {
  max-width: 100%;
  height: auto;
}
body.body-menu-horizontal {
  overflow: auto;
}
body.body-menu-horizontal .h-100.layout-wrapper {
  height: auto !important;
}
body.body-menu-horizontal .page-content {
  overflow: visible;
}
body.body-menu-horizontal .content-wrapper {
  display: block;
}
body.body-menu-horizontal .content-inner {
  height: auto;
  overflow-y: visible;
}
body.body-menu-horizontal .position-relative.stickyHeader thead {
  top: 50px;
}
body.body-menu-horizontal .content-wrapper.horizontal-wrapper {
  margin-left: 0;
}
.form-floating > .form-control-plaintext ~ label,
.form-floating > .form-control:focus ~ label,
.form-floating > label.focusIn,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label,
.form-floating > .form-control.patchValue ~ label,
.ft-ckeditor > label {
  width: auto;
  height: auto;
  background: #fff;
  padding: 0 5px;
  top: -10px;
  left: 11px;
  opacity: 1;
  transform: none;
  line-height: 1.3;
  max-width: calc(100% - 5px);
  font-size: 0.75rem;
  color: #777 !important;
}
.form-floating > .form-select ~ .errFormField {
  right: 1.3rem;
}
.ng-valid ~ .errFormField {
  display: none;
}
.form-floating {
  --form-floating-height: calc(2.5rem + calc(var(--border-width) * 2));
  --form-floating-line-height: auto;
  --form-floating-padding-y: 0.5rem;
  --form-floating-padding-x: 0.875rem;
  --form-floating-input-padding-t: 0.58rem;
  --form-floating-input-padding-b: 0.58rem;
  --form-floating-label-opacity: 1;
  --form-floating-label-transform: scale(0.85) translateY(-0.4rem) translateX(0.15rem);
  position: relative;
}
.form-floating label {
  color: rgba(0, 0, 0, 0.7);
}
.form-select:focus,
.form-control:focus {
  box-shadow: 0 0 0 0 transparent, 0 0 0 0.125rem rgba(123, 123, 127, 0.1);
}
.select2-floating app-validation-messages + app-d-select .fakeDSelect input,
.form-control.ng-invalid.ng-touched,
.form-select.ng-invalid.ng-touched {
  border-color: #EF4444;
  background: transparent !important;
}
.select2-floating {
  display: flex;
  align-items: center;
}
.select2-floating app-validation-messages {
  order: 2;
  margin-left: 0.3rem;
}
.field-invalid,
.ng-submitted:not(.ng-skip-pending) .form-control.ng-invalid,
.ng-submitted:not(.ng-skip-pending) .form-select.ng-invalid {
  border-color: #EF4444;
  background: transparent !important;
}
.ng-untouched.ng-pending.ng-skip-pending .form-control.is-invalid,
.ng-untouched.ng-pending.ng-skip-pending .form-select.is-invalid,
.ng-untouched.ng-pending.ng-skip-pending .form-control.ng-invalid,
.ng-untouched.ng-pending.ng-skip-pending .form-select.ng-invalid {
  border-color: rgb(209, 213, 219) !important;
}
.ng-untouched.ng-pending.ng-skip-pending app-validation-messages {
  display: none !important;
}
.ng-skip-pending .form-control.is-invalid:focus {
  box-shadow: none;
}
.form-floating.form-control-feedback-end > label {
  right: inherit;
}
.form-control-feedback-icon {
  --input-icon-padding-y: 0.7rem ;
}
.ft-ckeditor .ck.ck-toolbar {
  border-radius: var(--ck-border-radius) var(--ck-border-radius) 0 0 !important;
}
.boxCollapseEditor .ck-rounded-corners .ck.ck-editor__top .ck-sticky-panel .ck-toolbar {
  border-radius: 0;
  border-left: 0;
  border-right: 0;
}
.boxCollapseEditor .ck-rounded-corners .ck.ck-editor__main > .ck-editor__editable,
.boxCollapseEditor .ck.ck-editor__main > .ck-editor__editable.ck-rounded-corners {
  border-width: 1px 0 0 0;
}
.ck-powered-by-balloon {
  display: none !important;
}
.grecaptcha-badge {
  display: none !important;
}
.tableDefault thead {
  background: #eee;
  text-align: center;
}
.tableDefault tbody {
  background: #fff;
}
.form-switch .form-check-input {
  --form-check-input-height: 1.2rem;
}
.form-check-input {
  --form-check-input-width: 1rem;
  --form-check-input-height: 1rem;
}
.tooltip {
  --tooltip-bg: #616161;
  --tooltip-opacity: 1;
  --tooltip-padding-y: calc(var(--spacer) * 0.2);
  width: max-content;
}
.box-nav-icon {
  width: 42px !important;
  height: 42px !important;
}
img {
  max-width: 100%;
}
.dropdown-menu.show {
  transition: all 0.2s ease !important;
}
.font-size-sm {
  font-size: 0.75rem;
}
.text-black-50 {
  color: rgba(0, 0, 0, 0.5) !important;
}
.bg-teal-600 {
  background: #00897b;
}
.bg-grey {
  background: #777;
}
.bg-brown-400 {
  background-color: #8d6e63;
}
.bg-green {
  background: #8bc34a;
}
.bg-orange {
  background-color: #ff9800;
}
.min-vh-50 {
  min-height: 50vh;
}
.w-80 {
  width: 80%;
}
#offcFormFilter {
  left: 10%;
  top: 0.3rem;
}
.ck-content.ck-editor__editable {
  min-height: 150px;
}
.fw-semibold {
  font-weight: 500 !important;
}
.text-box-only-border-bottom {
  border-radius: 0;
  border: 0;
  outline: 0;
  border-bottom: 1px solid #ddd;
}
.text-secondary {
  color: #777 !important;
}
.transition-200 {
  transition: all 200ms;
}
.dropdown-no-after:after {
  display: none !important;
}
.disableds {
  pointer-events: none;
  cursor: default !important;
  opacity: 0.5;
}
ng-autonumeric input {
  text-align: right;
}
input[autonumeric],
span[autonumeric] {
  text-align: right;
}
.flex-auto {
  flex: 1 1 auto;
}
.previewImage img {
  width: 100px;
  height: 100px;
  object-fit: scale-down;
}
.hide {
  display: none;
}
.table-tiny th {
  padding: 0.5rem;
}
.table-tiny td {
  padding: 0.5rem;
}
text.highcharts-credits {
  display: none !important;
}
.highcharts-tooltip-box {
  fill: var(--card-bg, #ffffff) !important;
  stroke: var(--border-color, #cccccc) !important;
}
.highcharts-tooltip text,
.highcharts-tooltip tspan {
  fill: var(--body-color, #333333);
  color: var(--body-color, #333333);
}
th[appSortable] {
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
th[appSortable].desc:before,
th[appSortable].asc:before {
  float: left;
  font-size: 1em;
  content: "\e08e";
  font-family: Phosphor;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  margin-right: 5px;
}
th[appSortable].desc:before {
  transform: rotate(180deg);
  -ms-transform: rotate(180deg);
}
.form-control-feedback-icon {
  right: 0;
}
.show-placeholder input::placeholder {
  color: var(--input-placeholder-color) !important;
}
.form-floating > .form-control.showPlaceholder::placeholder,
.form-control.showPlaceholder::placeholder,
.showPlaceholder::placeholder {
  color: var(--input-placeholder-color) !important;
}
@media screen and (min-width: 1200px) {
  #assignTagOrdersModal .modal-dialog,
  #assignLabelModal .modal-dialog {
    align-items: start !important;
    padding-top: 8% !important;
  }
}
.blur-05 {
  opacity: 0.5;
}
.blur-03 {
  opacity: 0.3;
}
.radius-0 {
  border-radius: 0 !important;
}
.radius-left-0 {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}
.radius-right-0 {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
.table-xs {
  --table-cell-padding-y: 0.5rem;
  --table-cell-padding-x: .75rem;
}
.filterCanvas {
  max-width: 80% !important;
  --offcanvas-width: 80% !important;
}
.filterCanvas.filter-canvas-cols-4,
.filterCanvas.filter-canvas-cols-2,
.filterCanvas.filter-canvas-cols-3 {
  max-width: 100% !important;
  --offcanvas-width: 100% !important;
}
#filterBox.cols-input-filter-2 .filter-form-controls,
#filterBox.cols-input-filter-3 .filter-form-controls,
#filterBox.cols-input-filter-4 .filter-form-controls {
  padding-left: 0;
}
@media (max-width: 576px) {
  .filterCanvas {
    max-width: 100% !important;
    --offcanvas-width: 100% !important;
  }
}
@media (min-width: 768px) {
  .filterCanvas {
    max-width: 75% !important;
    --offcanvas-width: 75% !important;
  }
  .filterCanvas.filter-canvas-cols-4,
  .filterCanvas.filter-canvas-cols-3,
  .filterCanvas.filter-canvas-cols-2 {
    max-width: 100% !important;
    --offcanvas-width: 100% !important;
  }
}
@media (min-width: 1200px) {
  .filterCanvas {
    max-width: 50% !important;
    --offcanvas-width: 50% !important;
  }
  .filterCanvas.filter-canvas-cols-3,
  .filterCanvas.filter-canvas-cols-2 {
    max-width: 80% !important;
    --offcanvas-width: 80% !important;
  }
}
@media (min-width: 1500px) {
  .filterCanvas {
    max-width: 40% !important;
    --offcanvas-width: 40% !important;
  }
  .filterCanvas.filter-canvas-cols-4 {
    max-width: 90% !important;
    --offcanvas-width: 90% !important;
  }
  .filterCanvas.filter-canvas-cols-2 {
    max-width: 60% !important;
    --offcanvas-width: 60% !important;
  }
}
@media (min-width: 1700px) {
  .filterCanvas {
    max-width: 38% !important;
    --offcanvas-width: 38% !important;
  }
  .filterCanvas.filter-canvas-cols-3 {
    max-width: 70% !important;
    --offcanvas-width: 70% !important;
  }
  .filterCanvas.filter-canvas-cols-2 {
    max-width: 50% !important;
    --offcanvas-width: 50% !important;
  }
}
.offcanvas-header {
  background: #f0f2f5;
}
app-ref-print {
  display: none !important;
}
@media print {
  .tableDataGird table,
  .tableDataGird {
    width: 100% !important;
  }
  html,
  html body {
    width: 100% !important;
    overflow: visible !important;
    background: red !important;
    display: block !important;
  }
  html .text-nowrap,
  html *,
  html body .text-nowrap,
  html body * {
    white-space: normal !important;
  }
  app-ref-print {
    display: block !important;
    width: 100% !important;
  }
}
@media screen and (min-width: 1200px) {
  .position-relative.stickyHeader {
    overflow: visible !important;
    overflow-x: auto !important;
  }
  .position-relative.stickyHeader thead {
    position: sticky;
    top: -1px;
    z-index: 105;
  }
}
.table-bordered thead {
  --bg-opacity: 1;
  background-color: rgba(var(--light-rgb), var(--bg-opacity)) !important;
}
table tbody .stickyCol {
  position: sticky;
  z-index: 100;
  background: #fff;
  left: -1px;
}
.refSelectTh {
  width: 35px;
}
.tableDataGird tr th {
  text-align: center;
}
table .text-end.text-center {
  text-align: center !important;
}
table .text-end.text-start {
  text-align: start !important;
}
.btn-xs {
  min-height: 30px;
  --btn-line-height: 1.35;
  --btn-padding-y: 0.35rem;
  --btn-padding-x: 0.6rem;
  --btn-font-size: var(--body-font-size-sm);
  --btn-border-radius: var(--border-radius-sm) ;
}
.border-left-0 {
  border-left: 0 !important;
}
.border-right-0 {
  border-right: 0 !important;
}
.rounder-bottom-right-0 {
  border-bottom-right-radius: 0;
}
.rounder-top-left-0 {
  border-top-left-radius: 0;
}
.rounder-bottom-left-0 {
  border-bottom-left-radius: 0;
}
.w-20 {
  width: 20% !important;
}
.w-22 {
  width: 22% !important;
}
.w-23 {
  width: 23% !important;
}
.w-25 {
  width: 25% !important;
}
.w-30 {
  width: 30% !important;
}
.w-35 {
  width: 35% !important;
}
.w-65 {
  width: 65% !important;
}
.w-70 {
  width: 70% !important;
}
.w-75 {
  width: 75% !important;
}
.w-77 {
  width: 77% !important;
}
.w-78 {
  width: 78% !important;
}
.w-80 {
  width: 80% !important;
}
@media (min-width: 1200px) {
  .w-xl-30 {
    width: 30% !important;
  }
  .w-xl-70 {
    width: 70% !important;
  }
}
.fs-7 {
  font-size: 0.75rem !important;
}
.modal-backdrop.show,
.offcanvas-backdrop.show {
  opacity: 0.8;
}
.toast-container .ngx-toastr {
  font-size: 13px;
}
.posColl:not(.show) {
  max-height: 0;
  transition: max-height 0.35s ease-out;
  visibility: hidden;
  overflow: hidden;
}
.posColl.show {
  max-height: 900px;
  transition: max-height 0.35s ease-in;
  visibility: visible;
  overflow: hidden;
}
.nav-mobile-backdrop {
  position: fixed;
  z-index: 1500;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.65);
}
.sidebar.sidebar-mobile-expanded {
  z-index: 1600;
}
ngb-datepicker-navigation-select > .form-select {
  font-size: 0.75rem !important;
  background-position: right 0.5rem center !important;
  cursor: pointer;
}
.form-select option {
  font-size: 1rem;
}
.text-success {
  color: #4caf50 !important;
}
.btn-success {
  border-color: #4caf50;
  background-color: #4caf50;
}
.btn-success:hover {
  border-color: #289e2d;
  background-color: #289e2d;
}
.ic-inline-style-default {
  width: 1.2rem;
  font-size: 1rem;
}
.dg-img-width-default {
  width: 40px;
}
.min-w-2-5rem {
  min-width: 2.5rem;
}
.report_weekday_saturday {
  background: #f0f0f0 !important;
}
.report_weekday_sunday {
  background: #E2EFDA !important;
}
.fz-title {
  font-size: 1rem;
}
.fz-title-medium {
  font-size: 1.125rem;
}
.fz-title-large {
  font-size: 1.25rem;
}
.fz-title-big {
  font-size: 1.5rem;
}
.pre-json-viewer {
  overflow: auto;
}
.pre-json-viewer .segment-type-null .segment-value {
  background-color: #a5a5a5 !important;
}
.pre-json-viewer .ngx-json-viewer {
  overflow: initial !important;
}
.page-content .content-wrapper {
  max-height: calc(100% - 52px);
}
@media screen and (max-width: 1023px) {
  .page-content .content-wrapper {
    max-height: calc(100% - 0px);
  }
}
@media screen and (max-width: 991px) {
  .page-content .content-wrapper.horizontal-wrapper {
    max-height: calc(100% + 20px);
  }
  .page-content .content-wrapper:not(.horizontal-wrapper) {
    max-height: calc(100% - 80px);
  }
}
@media screen and (max-width: 768px) {
  .page-content .content-wrapper.horizontal-wrapper {
    max-height: calc(100% + 60px);
  }
  .page-content .content-wrapper:not(.horizontal-wrapper) {
    max-height: calc(100% - 40px);
  }
}
.appElemnentDescription .appElemnentDescIcon {
  visibility: hidden;
}
.appElemnentDescription:hover .appElemnentDescIcon {
  visibility: visible;
}
.form-check-radio {
  padding-left: 1.375rem;
}
.form-check-radio .form-check-input {
  margin-left: -1.375rem;
}
.form-check-radio .form-check-input,
.form-check-radio .form-check-label {
  cursor: pointer;
}
.form-check-input {
  --form-check-input-border: calc(var(--border-width) * 1.5) solid var(--gray-400);
}
.input-filter-has-value:not(:focus) {
  border-bottom: 2px solid var(--input-focus-border-color) !important;
}
app-pos-payment-other .payment-list .btn.checked {
  border: 1px solid #0964CF;
  background: #fff;
}
app-pos-payment-other .payment-list .btn.checked:before {
  z-index: 10;
  position: absolute;
  bottom: -11px;
  right: -9px;
  width: 30px;
  height: 30px;
  content: "";
}
@media screen and (min-width: 992px) {
  .modalOtherPayment {
    max-width: 700px;
  }
}
.switch-map-loader {
  position: absolute;
  right: 9px;
  top: 7px;
  background: white;
  z-index: 10;
  padding: 5px;
  border-radius: 50%;
}
app-c-image-prp .image-box .fa-image {
  font-size: 1.1rem;
}
app-c-image-prp .image-box > img {
  max-width: 2rem;
  max-height: 2.875rem;
}
app-c-image-prp .image-box .imageZoomHover {
  position: absolute;
  right: 0;
  left: 100%;
  top: 0;
  display: none;
  width: 12.5rem;
  height: 12.5rem;
  background: #fff;
  border: 2px solid #5bc42b;
  z-index: 9;
}
app-c-image-prp .image-box .imageZoomHover img {
  object-fit: contain;
}
@media screen and (min-width: 1200px) {
  app-c-image-prp .image-box:hover .imageZoomHover {
    display: block;
  }
}
.windowClassConfirmDelete {
  z-index: 9999999;
  background: rgba(0, 0, 0, 0.5);
}
.border-top-dashed {
  border-top: 1px dashed #ccc;
}
.input-group-text > i {
  min-width: 16px;
}
.alert-p-last-child p:last-child {
  margin-bottom: 0 !important;
}
.text-main {
  color: var(--main-color);
}
.bg-main {
  color: #fff;
  background: var(--main-color);
}
.btn-main {
  display: inline-block;
  font-weight: 500;
  color: #fff;
  text-align: center;
  vertical-align: middle;
  -webkit-user-select: none;
  user-select: none;
  background-color: var(--main-color);
  border: 1px solid var(--main-color);
  line-height: 1.5;
  border-radius: 0.375rem;
  transition: all 0.2s ease-in-out;
}
.btn-main:hover {
  background-color: var(--hover-color);
  color: #fff;
}
.btn-main:disabled,
.btn-main.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: var(--main-color);
  border-color: var(--main-color);
  color: #fff;
}
.btn-group > .dropdown-toggle-split,
.btn-group > [ngbDropdownToggle].dropdown-toggle-split,
.btn-group > [ngbDropdown] > .dropdown-toggle,
.btn-group > [ngbDropdown] > [ngbDropdownToggle] {
  filter: brightness(0.88);
  border-left: 1px solid rgba(255, 255, 255, 0.6) !important;
}
.btn-group > .dropdown-toggle-split:hover,
.btn-group > .dropdown-toggle-split.show,
.btn-group > .dropdown-toggle-split[aria-expanded=true],
.btn-group > [ngbDropdownToggle].dropdown-toggle-split:hover,
.btn-group > [ngbDropdownToggle].dropdown-toggle-split.show,
.btn-group > [ngbDropdownToggle].dropdown-toggle-split[aria-expanded=true],
.btn-group > [ngbDropdown] > .dropdown-toggle:hover,
.btn-group > [ngbDropdown] > .dropdown-toggle.show,
.btn-group > [ngbDropdown] > .dropdown-toggle[aria-expanded=true],
.btn-group > [ngbDropdown] > [ngbDropdownToggle]:hover,
.btn-group > [ngbDropdown] > [ngbDropdownToggle].show,
.btn-group > [ngbDropdown] > [ngbDropdownToggle][aria-expanded=true] {
  filter: brightness(0.78);
  color: #fff;
}
.checkbox-switch-main:checked {
  border: none;
  outline: none;
  box-shadow: none;
  background-color: var(--main-color);
}
.checkbox-switch-main:focus {
  border-color: var(--gray-400);
  outline: none;
  box-shadow: none;
}
.radio-main:checked {
  background-color: var(--main-color) !important;
  border-color: var(--main-color) !important;
}
.offcanvas-bottom {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  background-color: var(--body-bg);
  padding-bottom: var(--safe-area-bottom, 0px);
}
.offcanvas-bottom.date-picker-offcanvas,
.offcanvas-bottom.bank-offcanvas {
  background: #ffffff !important;
}
.offcanvas-bottom.date-picker-offcanvas {
  overflow-x: hidden;
  touch-action: pan-y;
  overscroll-behavior-x: none;
}
.nav-item-submenu > .nav-link:after {
  font-family: "Phosphor";
  content: "\e13a";
}
.dropdown-toggle::after {
  font-family: "Phosphor";
  content: "\e136";
}
.dropup .dropdown-toggle::after {
  font-family: "Phosphor";
  content: "\e136";
}
.toast-container {
  pointer-events: auto !important;
}
.toast-container.toast-top-center {
  top: calc(var(--safe-area-top, 0px) + 12px);
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 24px);
  max-width: 420px;
}
.toast-container .btn-close {
  position: relative !important;
  padding: 0.5rem !important;
}
.toast-container .toast-item {
  width: 100%;
  min-width: 0;
  max-width: 420px;
  font-size: 14px;
  line-height: 1.35;
  border: 0;
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(33, 37, 41, 0.18);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.toast-container .ngx-toastr {
  background-color: transparent !important;
  background-image: none !important;
  background-position: initial !important;
  background-repeat: initial !important;
  background-size: initial !important;
  box-shadow: unset !important;
  padding: 0 !important;
  width: 100% !important;
  margin: 0 0 0.5rem;
  border-radius: 16px;
  overflow: hidden;
}
.toast-container .toast-content {
  min-width: 0;
}
.toast-container .toast-item i {
  font-size: 18px;
}
.toast-container .mt-05 {
  margin-top: 0.2rem !important;
}
.custom-day {
  text-align: center;
  padding: 0.185rem 0.25rem;
  display: inline-block;
  height: 2rem;
  width: 2rem;
  border-radius: 0.25rem;
  cursor: pointer;
}
.custom-day.today {
  background-color: #e2e8f0;
  color: #0f172a;
}
.custom-day.today.selected {
  background-color: #007bff;
  color: #fff;
}
.custom-day:hover {
  background-color: #f1f5f9;
  color: #1e293b;
}
.custom-day.today:hover {
  background-color: #f1f5f9;
  color: #1e293b;
}
.custom-day.selected {
  background-color: #007bff;
  color: #fff;
}
.custom-day.selected:hover {
  background-color: #007bff;
  color: #fff;
}
.custom-day.today.selected:hover {
  background-color: #007bff;
  color: #fff;
}
.custom-day.focused {
  background-color: #e6e6e6;
}
.custom-day.today.focused {
  background-color: #e2e8f0;
  color: #0f172a;
}
.custom-day.selected.focused {
  background-color: #007bff;
  color: #fff;
}
tr.hovered > * {
  --table-accent-bg: var(--table-hover-bg);
}
.faq-highlight {
  color: var(--main-color, #F35C86);
  font-weight: 700;
}
html[data-app=zalo-mini-app] {
  --main-color: #F35C86;
  --hover-color: #ff4f81;
  --body-bg: #f2f2f6;
}
html[data-app=zalo-mini-app] .text-main {
  color: var(--main-color);
}
html[data-app=zalo-mini-app] .bg-main {
  color: #fff;
  background: var(--main-color);
}
html[data-app=zalo-mini-app] .btn-main {
  display: inline-block;
  font-weight: 500;
  color: #fff;
  text-align: center;
  vertical-align: middle;
  -webkit-user-select: none;
  user-select: none;
  background-color: var(--main-color);
  border: 1px solid var(--main-color);
  padding: 0.375rem 0.75rem;
  line-height: 1.5;
  border-radius: 0.375rem;
  transition: all 0.2s ease-in-out;
}
html[data-app=zalo-mini-app] .btn-main:hover {
  background-color: var(--hover-color);
  color: #fff;
}
html[data-app=zalo-mini-app] .btn-main:disabled,
html[data-app=zalo-mini-app] .btn-main.disabled {
  opacity: 0.65;
  cursor: not-allowed;
  background-color: var(--main-color);
  border-color: var(--main-color);
  color: #fff;
}
html[data-app=zalo-mini-app] .checkbox-switch-main:checked {
  background-color: var(--main-color);
}
html[data-app=zalo-mini-app] .dropdown-toggle::after {
  font-family: "Phosphor";
  content: "\e136";
}
html[data-app=zalo-mini-app] .dropup .dropdown-toggle::after {
  font-family: "Phosphor";
  content: "\e136";
}
html[data-app=zalo-mini-app] .offcanvas-bottom {
  background-color: var(--body-bg);
}
html[data-app=zalo-mini-app] .form-floating > .form-control-plaintext ~ label,
html[data-app=zalo-mini-app] .form-floating > .form-control:focus ~ label,
html[data-app=zalo-mini-app] .form-floating > label.focusIn,
html[data-app=zalo-mini-app] .form-floating > .form-control:not(:placeholder-shown) ~ label,
html[data-app=zalo-mini-app] .form-floating > .form-select ~ label,
html[data-app=zalo-mini-app] .form-floating > .form-control.patchValue ~ label,
html[data-app=zalo-mini-app] .ft-ckeditor > label {
  width: auto;
  height: auto;
  background: #fff;
  padding: 0 5px;
  top: -10px;
  left: 11px;
  opacity: 1;
  transform: none;
  line-height: 1.3;
  max-width: calc(100% - 5px);
  font-size: 0.75rem;
  color: #777 !important;
}
html[data-app=zalo-mini-app] .form-floating > .form-select ~ .errFormField {
  right: 1.3rem;
}
html[data-app=zalo-mini-app] .ng-valid ~ .errFormField {
  display: none;
}
html[data-app=zalo-mini-app] .form-floating {
  --form-floating-height: calc(2.5rem + calc(var(--border-width) * 2));
  --form-floating-line-height: auto;
  --form-floating-padding-y: 0.5rem;
  --form-floating-padding-x: 0.875rem;
  --form-floating-input-padding-t: 0.58rem;
  --form-floating-input-padding-b: 0.58rem;
  --form-floating-label-opacity: 1;
  --form-floating-label-transform: scale(0.85) translateY(-0.4rem) translateX(0.15rem);
  position: relative;
}
html[data-app=zalo-mini-app] .form-floating label {
  color: rgba(0, 0, 0, 0.7);
}
html[data-app=zalo-mini-app] .form-select:focus,
html[data-app=zalo-mini-app] .form-control:focus {
  box-shadow: 0 0 0 0 transparent, 0 0 0 0.125rem rgba(123, 123, 127, 0.1);
}
html[data-app=zalo-mini-app] .select2-floating app-validation-messages + app-d-select .fakeDSelect input,
html[data-app=zalo-mini-app] .form-control.ng-invalid.ng-touched,
html[data-app=zalo-mini-app] .form-select.ng-invalid.ng-touched {
  border-color: #EF4444;
  background: transparent !important;
}
html[data-app=zalo-mini-app] .select2-floating {
  display: flex;
  align-items: center;
}
html[data-app=zalo-mini-app] .select2-floating app-validation-messages {
  order: 2;
  margin-left: 0.3rem;
}
html[data-app=zalo-mini-app] .field-invalid,
html[data-app=zalo-mini-app] .ng-submitted:not(.ng-skip-pending) .form-control.ng-invalid,
html[data-app=zalo-mini-app] .ng-submitted:not(.ng-skip-pending) .form-select.ng-invalid {
  border-color: #EF4444;
  background: transparent !important;
}
html[data-app=zalo-mini-app] .ng-untouched.ng-pending.ng-skip-pending .form-control.is-invalid,
html[data-app=zalo-mini-app] .ng-untouched.ng-pending.ng-skip-pending .form-select.is-invalid,
html[data-app=zalo-mini-app] .ng-untouched.ng-pending.ng-skip-pending .form-control.ng-invalid,
html[data-app=zalo-mini-app] .ng-untouched.ng-pending.ng-skip-pending .form-select.ng-invalid {
  border-color: rgb(209, 213, 219) !important;
}
html[data-app=zalo-mini-app] .ng-untouched.ng-pending.ng-skip-pending app-validation-messages {
  display: none !important;
}
html[data-app=zalo-mini-app] .ng-skip-pending .form-control.is-invalid:focus {
  box-shadow: none;
}
html[data-app=zalo-mini-app] .form-floating.form-control-feedback-end > label {
  right: inherit;
}
html[data-app=zalo-mini-app] .form-control-feedback-icon {
  --input-icon-padding-y: 0.7rem ;
}
html[data-app=zalo-mini-app] .ft-ckeditor .ck.ck-toolbar {
  border-radius: var(--ck-border-radius) var(--ck-border-radius) 0 0 !important;
}
html[data-app=zalo-mini-app] .toast-container {
  position: fixed !important;
  z-index: 999999 !important;
}
[data-color-theme=dark] {
  --color-bg-body: #18191A;
  --color-bg-card: #242526;
  --color-bg-section: #2A2B2C;
  --color-bg-input: #2F3031;
  --color-bg-hover: #3A3B3C;
  --color-bg-button: #3A3B3C;
  --color-bg-active: #4E4F50;
  --color-border: #3E4042;
  --color-border-strong: #5A5D62;
  --color-divider: #3E4042;
  --color-text-primary: #E4E6EB;
  --color-text-secondary: #B0B3B8;
  --color-text-placeholder: #8A8D91;
  --color-text-disabled: #6B6D70;
  --color-icon-primary: #E4E6EB;
  --color-icon-secondary: #8A8D91;
  --color-primary: #F35C86;
  --color-primary-hover: #FF4F81;
  --color-primary-active: #E64A78;
  --color-primary-rgb:
    243,
    92,
    134;
}
[data-color-theme=dark] .layout-app,
[data-color-theme=dark] .layout-zalo,
[data-color-theme=dark] .layout-wrapper {
  background-color: var(--color-bg-body) !important;
  color: var(--color-text-primary) !important;
}
[data-color-theme=dark] .card {
  background-color: var(--color-bg-card) !important;
}
[data-color-theme=dark] .text-muted {
  color: var(--color-text-secondary) !important;
}
[data-color-theme=dark] .tooltip {
  --tooltip-bg: var(--color-bg-active) !important;
  --tooltip-color: var(--color-text-primary) !important;
}
[data-color-theme=dark] .toast-container .toast-item {
  border: 1px solid var(--color-border) !important;
  color: var(--color-text-primary) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4) !important;
}
[data-color-theme=dark] .toast-container .toast-item.alert-success {
  background-color: #12352F !important;
  border-color: #2E7568 !important;
  color: #8FEAD8 !important;
}
[data-color-theme=dark] .toast-container .toast-item.alert-danger {
  background-color: #3A1E1E !important;
  border-color: #7A3A3A !important;
  color: #FFA0A0 !important;
}
[data-color-theme=dark] .toast-container .toast-item.alert-warning {
  background-color: #3A2D14 !important;
  border-color: #7A6028 !important;
  color: #FFD98A !important;
}
[data-color-theme=dark] .toast-container .toast-item.alert-info {
  background-color: #172D3F !important;
  border-color: #315F83 !important;
  color: #9FD0FF !important;
}
[data-color-theme=dark] .btn-light,
[data-color-theme=dark] .btn-white {
  background-color: var(--color-bg-section) !important;
  color: var(--color-text-primary) !important;
  border-color: var(--color-border-strong) !important;
}
[data-color-theme=dark] .border-top {
  border-top: 1px solid var(--color-border) !important;
}
[data-color-theme=dark] .bg-white {
  background-color: var(--color-bg-card) !important;
}
[data-color-theme=dark] .form-control {
  background-color: var(--color-bg-input) !important;
  border-color: var(--color-border-strong) !important;
  color: var(--color-text-primary) !important;
}
[data-color-theme=dark] .form-control::placeholder {
  color: var(--color-text-placeholder) !important;
}
[data-color-theme=dark] .form-floating > .form-control::placeholder {
  color: transparent !important;
}
[data-color-theme=dark] .form-floating > .form-control.showPlaceholder::placeholder,
[data-color-theme=dark] .form-control.showPlaceholder::placeholder,
[data-color-theme=dark] .show-placeholder input::placeholder,
[data-color-theme=dark] .showPlaceholder::placeholder {
  color: var(--color-text-placeholder) !important;
}
[data-color-theme=dark] .form-floating > label {
  color: var(--color-text-placeholder) !important;
}
[data-color-theme=dark] .form-floating > .form-control:focus ~ label,
[data-color-theme=dark] .form-floating > .form-control:not(:placeholder-shown) ~ label,
[data-color-theme=dark] .form-floating > .form-control.patchValue ~ label,
[data-color-theme=dark] .form-floating > label.focusIn,
[data-color-theme=dark] .ft-ckeditor > label {
  background: var(--color-bg-card) !important;
  color: var(--color-text-secondary) !important;
}
[data-color-theme=dark] .form-floating > label::after {
  background-color: var(--color-bg-card) !important;
}
[data-color-theme=dark] .dropdown-menu {
  background-color: var(--color-bg-card) !important;
  border-color: var(--color-border) !important;
}
[data-color-theme=dark] .dropdown-item {
  color: var(--color-text-primary) !important;
}
[data-color-theme=dark] .border-bottom {
  border-bottom: 1px solid var(--color-border) !important;
}
[data-color-theme=dark] .shadow-sm {
  box-shadow: 0 0.125rem 0.75rem rgba(0, 0, 0, 0.3490196078) !important;
}
[data-color-theme=dark] .modal-content {
  background-color: var(--color-bg-card) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text-primary) !important;
}
[data-color-theme=dark] .offcanvas-bottom .card,
[data-color-theme=dark] .modal-content .card {
  background-color: var(--color-bg-section) !important;
}
[data-color-theme=dark] .offcanvas-bottom.date-picker-offcanvas,
[data-color-theme=dark] .offcanvas-bottom.bank-offcanvas,
[data-color-theme=dark] .offcanvas-bottom {
  background-color: var(--color-bg-card) !important;
}
[data-color-theme=dark] .cssload-container {
  background-color: rgba(24, 25, 26, 0.8) !important;
}
[data-color-theme=dark] app-nav-tabs-mobile .nav-tabs-mobile {
  border-color: var(--color-border) !important;
}
[data-color-theme=dark] app-checkbox .form-check-input {
  background-color: var(--color-bg-input) !important;
  border-color: var(--color-border-strong) !important;
}
[data-color-theme=dark] app-checkbox .form-check-input:checked {
  background-color: var(--color-primary) !important;
}
[data-color-theme=dark] app-c-nav-tabs .nav-link {
  color: var(--color-text-secondary) !important;
}
[data-color-theme=dark] ul.order-tabs-sub {
  --sub-tab-active-bg: rgba(12, 131, 255, 0.18);
  --sub-tab-active-color: var(--color-text-primary);
}
[data-color-theme=dark] app-decimal-numeric-advanced .form-floating label {
  color: var(--color-text-secondary) !important;
}
[data-color-theme=dark] .date-picker-body::before {
  background:
    linear-gradient(
      to bottom,
      var(--color-bg-card) 30%,
      transparent) !important;
}
[data-color-theme=dark] .date-picker-body::after {
  background:
    linear-gradient(
      to top,
      var(--color-bg-card) 30%,
      transparent) !important;
}
[data-color-theme=dark] .middle-bar {
  border-top-color: var(--color-border) !important;
  border-bottom-color: var(--color-border) !important;
}
[data-color-theme=dark] app-location-modal .form-floating label {
  color: var(--color-text-secondary) !important;
}
[data-color-theme=dark] app-location-modal .inputLocation:focus {
  border-color: var(--color-border-strong) !important;
}
[data-color-theme=dark] app-location-modal .inputLocation::placeholder {
  color: var(--color-text-placeholder) !important;
}
[data-color-theme=dark] .search-box {
  background-color: var(--color-bg-input) !important;
  border-color: var(--color-border-strong) !important;
}
[data-color-theme=dark] .search-box i {
  color: var(--color-icon-secondary) !important;
}
[data-color-theme=dark] .search-box input {
  color: var(--color-text-primary) !important;
}
[data-color-theme=dark] .search-box input::placeholder {
  color: var(--color-text-placeholder) !important;
}
[data-color-theme=dark] .item-location {
  border-bottom-color: var(--color-border) !important;
  color: var(--color-text-primary) !important;
}
[data-color-theme=dark] .item-location:hover {
  background-color: var(--color-bg-hover) !important;
}
[data-color-theme=dark] .item-location.selected {
  background-color: rgba(var(--color-primary-rgb), 0.16) !important;
  border-color: var(--color-primary) !important;
  color: var(--color-text-primary) !important;
}
[data-color-theme=dark] .box_displayList {
  background-color: var(--color-bg-card) !important;
}
[data-color-theme=dark] app-select-custom .fakeDSelect .icon {
  color: var(--color-icon-secondary) !important;
}
[data-color-theme=dark] app-select-custom .fakeDivInput {
  background-color: var(--color-bg-input) !important;
  border-color: var(--color-border-strong) !important;
  color: var(--color-text-primary) !important;
}
[data-color-theme=dark] app-select-custom .form-floating label {
  color: var(--color-text-secondary) !important;
}
[data-color-theme=dark] app-select-custom .fakeDSelect.form-floating > .form-control:focus ~ label,
[data-color-theme=dark] app-select-custom .fakeDSelect.form-floating > .form-control:not(:placeholder-shown) ~ label,
[data-color-theme=dark] app-select-custom .fakeDSelect.form-floating > label.focusLabel {
  background: var(--color-bg-card) !important;
  color: var(--color-text-secondary) !important;
}
[data-color-theme=dark] app-select-custom .fakeDSelect.form-floating > label::after {
  background-color: var(--color-bg-card) !important;
}
[data-color-theme=dark] app-select-options .dropOptions {
  background: var(--color-bg-card) !important;
  border-color: var(--color-border) !important;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.5019607843) !important;
  color: var(--color-text-primary) !important;
}
[data-color-theme=dark] app-select-options .dropOptions .item:hover,
[data-color-theme=dark] app-select-options .dropOptions .item.active {
  background: var(--color-bg-hover) !important;
}
[data-color-theme=dark] app-select-options .disable_option {
  background-color: var(--color-bg-section) !important;
  color: var(--color-text-disabled) !important;
}
[data-color-theme=dark] app-select-options .isEmpty,
[data-color-theme=dark] app-select-options .fs-sm {
  color: var(--color-text-secondary) !important;
}
[data-color-theme=dark] app-select-options .icon-d-Search {
  color: var(--color-icon-secondary) !important;
}
[data-color-theme=dark] .bank-offcanvas-header {
  background-color: var(--color-bg-card) !important;
  border-bottom-color: var(--color-border) !important;
}
[data-color-theme=dark] .bank-offcanvas .bank-search {
  background-color: var(--color-bg-input) !important;
  border-color: var(--color-border-strong) !important;
}
[data-color-theme=dark] .bank-offcanvas .bank-logo {
  background-color: var(--color-bg-section) !important;
}
[data-color-theme=dark] .onboarding-page {
  background-color: var(--color-bg-body) !important;
  color: var(--color-text-primary) !important;
}
[data-color-theme=dark] .onboarding-title,
[data-color-theme=dark] .onboarding-divider-text,
[data-color-theme=dark] .onboarding-card-title,
[data-color-theme=dark] .onboarding-card-desc {
  color: var(--color-text-primary) !important;
}
[data-color-theme=dark] .onboarding-card {
  background-color: var(--color-bg-card) !important;
  border-color: var(--color-border) !important;
}
[data-color-theme=dark] .onboarding-card-icon {
  background-color: rgba(var(--color-primary-rgb), 0.16) !important;
}
[data-color-theme=dark] .onboarding-divider-line {
  background-color: var(--color-divider) !important;
}
[data-color-theme=dark] .onboarding-bottom {
  background-color: var(--color-bg-card) !important;
  border-color: var(--color-border) !important;
}
[data-color-theme=dark] .onboarding-label {
  color: var(--color-text-primary) !important;
}
[data-color-theme=dark] .order-index-note {
  color: var(--color-text-secondary) !important;
}
[data-color-theme=dark] .order-status-badge {
  background-color: color-mix(in srgb, var(--order-status-color) 16%, var(--color-bg-card)) !important;
  border: 1px solid color-mix(in srgb, var(--order-status-color) 32%, var(--color-border)) !important;
  color: color-mix(in srgb, var(--order-status-color) 35%, #ffffff) !important;
}
[data-color-theme=dark] .order-load-more-btn.is-loading {
  background-color: var(--color-bg-hover) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text-secondary) !important;
}
[data-color-theme=dark] .order-load-more-btn.is-loading .spinner-border {
  color: var(--color-text-secondary) !important;
}
[data-color-theme=dark] .vertical-dash {
  border-left-color: var(--color-border-strong) !important;
}
[data-color-theme=dark] .revenue-total-top,
[data-color-theme=dark] .revenue-total-bottom {
  background-color: rgba(var(--color-primary-rgb), 0.16) !important;
}
[data-color-theme=dark] .revenue-total-top {
  border-bottom-color: rgba(var(--color-primary-rgb), 0.45) !important;
}
[data-color-theme=dark] .order-sticky-actions {
  border-top: 1px solid var(--color-border) !important;
}
[data-color-theme=dark] .order-footer-received {
  background-color: #12352F !important;
  border-top-color: #2E7568 !important;
}
[data-color-theme=dark] .order-footer-debt {
  background-color: #3A1E1E !important;
  border-top-color: #7A3A3A !important;
}
[data-color-theme=dark] .regulation-frame-wrap,
[data-color-theme=dark] .regulation-frame {
  background-color: var(--color-bg-card) !important;
}
[data-color-theme=dark] .regulation-frame-wrap {
  border-top: 1px solid var(--color-border) !important;
}
[data-color-theme=dark] .order-detail .alert p,
[data-color-theme=dark] .order-detail .alert .text-dark {
  color: var(--color-text-secondary) !important;
}
[data-color-theme=dark] .order-detail .alert .text-primary {
  color: rgba(var(--primary-rgb), var(--text-opacity)) !important;
}
[data-color-theme=dark] .order-detail-tracking-item .icon,
[data-color-theme=dark] .order-detail-tracking-item .line {
  opacity: 0.2 !important;
}
[data-color-theme=dark] .order-detail-tracking-item .text,
[data-color-theme=dark] .order-detail-tracking-item .value {
  color: var(--color-text-secondary) !important;
}
[data-color-theme=dark] .order-detail-tracking-item .icon.active,
[data-color-theme=dark] .order-detail-tracking-item .line.active {
  opacity: 1 !important;
}
[data-color-theme=dark] .order-detail-tracking-item .text.active,
[data-color-theme=dark] .order-detail-tracking-item .value.active {
  color: var(--color-text-primary) !important;
}
[data-color-theme=dark] .delivery-rate-modal__close {
  background-color: var(--color-bg-hover) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text-secondary) !important;
}
[data-color-theme=dark] .delivery-rate-total-card,
[data-color-theme=dark] .delivery-rate-status-card {
  background-color: var(--color-bg-section) !important;
  border-color: var(--color-border) !important;
}
[data-color-theme=dark] .delivery-rate-status-row {
  border-bottom-color: var(--color-border) !important;
}
[data-color-theme=dark] .delivery-rate-total-card__icon {
  background-color: rgba(13, 110, 253, 0.16) !important;
}
[data-color-theme=dark] .delivery-rate-total-card__label,
[data-color-theme=dark] .delivery-rate-total-card__unit,
[data-color-theme=dark] .delivery-rate-status-row__left {
  color: var(--color-text-secondary) !important;
}
[data-color-theme=dark] app-order-custom .form-floating > .form-control::placeholder {
  color: transparent !important;
}
[data-color-theme=dark] app-order-custom .form-floating > label {
  color: var(--color-text-secondary) !important;
}
[data-color-theme=dark] app-order-custom .input-group-text.bg-transparent {
  background-color: var(--color-bg-input) !important;
  border-color: var(--color-border-strong) !important;
}
[data-color-theme=dark] app-order-custom app-decimal-numeric-advanced {
  border-right-color: var(--color-border) !important;
}
[data-color-theme=dark] app-order-custom .dimension-inputs {
  border-color: var(--color-border-strong) !important;
  background-color: var(--color-bg-input) !important;
}
[data-color-theme=dark] app-order-custom .dimension-label {
  background-color: var(--color-bg-card) !important;
  color: var(--color-text-secondary) !important;
}
[data-color-theme=dark] app-order-custom .calculator-item.active {
  background-color: rgba(var(--color-primary-rgb), 0.04) !important;
  border-color: var(--color-primary) !important;
}
[data-color-theme=dark] .bg-body {
  background-color: var(--color-bg-input) !important;
}
[data-color-theme=dark] .order-custom-offcanvas .form-floating > .form-control::placeholder {
  color: transparent !important;
}
[data-color-theme=dark] .order-custom-offcanvas .form-floating > label {
  color: var(--color-text-secondary) !important;
}
[data-color-theme=dark] .order-custom-offcanvas .input-group-text.bg-transparent {
  background-color: var(--color-bg-input) !important;
  border-color: var(--color-border-strong) !important;
}
[data-color-theme=dark] .home-contact-messenger-btn {
  background:
    linear-gradient(var(--color-bg-card), var(--color-bg-card)) padding-box,
    linear-gradient(
      90deg,
      #FF5F73 0%,
      #C640CB 37%,
      #8D3FFF 71%,
      #3B73FE 100%) border-box !important;
  color: var(--color-text-primary) !important;
}
[data-color-theme=dark] .user-section-icon,
[data-color-theme=dark] .home-contact-support-icon,
[data-color-theme=dark] .bg-momo-light,
[data-color-theme=dark] .bg-momo-light-title {
  background-color: rgba(var(--color-primary-rgb), 0.16) !important;
  border-color: var(--color-border) !important;
  color: var(--color-primary) !important;
}
[data-color-theme=dark] .box-color {
  border-color: var(--color-border) !important;
}
[data-color-theme=dark] .user-avatar {
  background: var(--color-primary) !important;
  border-color: var(--color-primary-active) !important;
  color: #fff !important;
}
[data-color-theme=dark] app-calculate-fee app-decimal-numeric-advanced {
  border-right-color: var(--color-border) !important;
}
[data-color-theme=dark] app-calculate-fee .dimension-inputs {
  border-color: var(--color-border-strong) !important;
  background-color: var(--color-bg-input) !important;
}
[data-color-theme=dark] app-calculate-fee .dimension-label {
  background-color: var(--color-bg-card) !important;
  color: var(--color-text-secondary) !important;
}
[data-color-theme=dark] app-calculate-fee .calculator-item.active {
  background-color: rgba(var(--color-primary-rgb), 0.04) !important;
  border-color: var(--color-primary) !important;
}
:root {
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --mobile-tab-height: 4.5rem;
}
html,
body {
  height: 100%;
}

/* angular:styles/global:styles */