/**
 - File custom css theo project
 - Nó sẽ ghi đè các css của các file css lib
 */
/* Override bg-body — dùng màu nền tương phản tốt hơn (#E2E6ED) thay vì màu mặc định của theme */
/* Override body-color — màu chữ đen hẳn (#000) dễ đọc hơn */
:root {
  --bg-body: #DFE3E8;
  --body-color: #000;
}

.mt-1_5 {
  margin-top: 0.45rem !important;
}

.vh-50 {
  height: 50vh !important
}

.fs-7 {
  font-size: 0.75rem !important
}
.fs-6-5 {
  font-size: 0.85rem !important
}
.fs-xl {
  font-size: 1.5rem !important;  /* 24px */
}
/* Override all.min.css: fs-1/2/3 dùng calc(~20px), redefine thành scale chuẩn */
.fs-3 {
  font-size: 1.5rem !important;  /* 24px */
}
.fs-2 {
  font-size: 2rem !important;    /* 32px */
}
.fs-1 {
  font-size: 2.5rem !important;  /* 40px */
}
/* Multiplier scale (thay thế fa-2x/3x/4x cũ) */
.fs-2x {
  font-size: 2rem !important;    /* 32px */
}
.fs-3x {
  font-size: 3rem !important;    /* 48px */
}
.fs-4x {
  font-size: 4rem !important;    /* 64px */
}

/**
 Do font này nhỏ hơn font-awesome cũ nên
 nên cần thay tỷ lệ font-size cho tương ứng
*/
.ph, .ph-bold, .ph-light, .ph-thin, .ph-fill, .ph-duotone {
  font-size: 1.25em;
  vertical-align: -0.125em;
}

.ph-lg {
  font-size: 1.5em !important;
  line-height: .05em;
  vertical-align: -.18em;
}

.ph-2x {
  font-size: 2.5em !important;
  vertical-align: -0.15em !important;
}

.ph-3x {
  font-size: 3.7em !important;
  vertical-align: -0.15em !important;
}


.form-control-feedback-start:not(.filterBasicImportant.search-group) .form-control {
  padding-left: calc(var(--input-padding-x) * 2 + var(--icon-font-size))
}

.autoComplete_wrapper > ul {
  z-index: 106;
}

/* set height ckeditor product content */
#cldetailPsContent .ck-editor__editable {
  height: 22.3rem;
}

.autoComplete_wrapper > ul > li.active {
  color: var(--ac-item-active-color);
  background-color: var(--ac-item-active-bg)
}

/**
* có class fakeInput thì ko dùng css này
* do có trường hợp muốn dùng input
* select2, date-range
 */
.form-control[readonly]:not(.fakeInput) {
  background-color: var(--hover-bg);
  opacity: 1;
}

.bg-slate {
  background-color: #607d8b;
}

@media (max-width: 768px) {
  .overflow-auto-mb {
    overflow: auto !important
  }
}

.cdk-virtual-scroll-orientation-vertical .cdk-virtual-scroll-content-wrapper {
  max-width: 100% !important;
}