* {
  outline: none !important;
  box-sizing: border-box !important;
  -webkit-box-sizing: border-box !important;
  padding: 0;
  margin: 0;
}

.vc-leading-tight {
  padding-top: 7px !important;
  padding-bottom: 7px !important;
}

.group-checkbox {
  width: 5%;
}

.group-action {
  width: 1%;
}

td button,
td .btn,
td .button {
  white-space: nowrap;
  border-radius: 1rem;
  line-height: 1;
  font-size: .8rem;
  padding: .45rem .5rem;
  height: unset;
  display: flex;
  align-items: center;
  letter-spacing: .035em;
}

td .a {
  white-space: nowrap;
  border-radius: 1rem;
  line-height: 1;
  font-size: .8rem;
  padding: 0.25rem 0.5rem;
  height: unset;
  display: flex;
  align-items: center;
  letter-spacing: .035em;
}

.badge {
  border-radius: .5rem !important;
  padding: 0.30em 0.5em !important;
  /*color: #697686 !important;*/
  /*background-color: #e8f8ff !important;*/
  /*background-color: #f9fbfd !important;*/
  border: 1px solid #d9e2ef !important;
}

td button i,
td .btn i,
td .button i {
  font-size: .8em !important;
  height: unset !important;
  width: unset !important;
  /*margin-right: .3rem !important;*/
}

/*gợn sóng button*/
.ripple-effect {
  position: absolute;
  border-radius: 50%;
  width: 10px;
  height: 10px;
  background: white;
  animation: ink 2s;
  box-shadow: -1px 0 0 1px rgba(61, 173, 233, 0.75), -1px -1px 0 1px rgba(94, 142, 226, 0.25),
  -1px 1px 0 1px rgba(94, 142, 226, 0.25), 0 -1px 0 1px rgba(126, 110, 218, 0.5),
  0 1px 0 1px rgba(126, 110, 218, 0.5), 1px -1px 0 1px rgba(159, 79, 211, 0.25),
  1px 1px 0 1px rgba(159, 79, 211, 0.25), 1px 0 0 1px rgba(191, 47, 203, 0.75);
}

.ripple {
  position: relative;
  border: none;
  outline: none;
  cursor: pointer;
  background: #0db6e9;
  color: #f7f9ff;
  padding: 5px 60px;
  border-radius: 2px;
  font-size: 20px;
  width: 100%;
  overflow: hidden;
  letter-spacing: 2px;
  font-weight: bold;
}

@-webkit-keyframes ink {
  0% {
    opacity: 0.2;
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(40);
    transform: scale(40);
  }
}

@keyframes ink {
  0% {
    opacity: 0.2;
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(40);
    transform: scale(40);
  }
}

/*end gợn sóng button*/

body,
html {
  font-family: Tahoma;
  letter-spacing: .04em;
  background-color: #f5f7fb !important;
}

.table thead th {
  border-bottom: 1px solid !important;
  border-bottom-color: #d8dbe094 !important;
  text-transform: uppercase;
  font-size: .8em;
  color: var(--primary-legacy-theme);
  white-space: nowrap;
}

button,
a {
  outline: none !important;
  user-select: none !important;
}

.table th {
  border-top: none !important;
}

.children-title {
  font-size: .85em;
}

.btn.dropdown-toggle {
  background: #fff;
}

.btn.dropdown-toggle:focus,
.form-control:focus {
  border-color: var(--primary-thin-legacy-theme) !important;
}

.form-control:focus {
  box-shadow: none !important;
}

.form-control:hover {
  box-shadow: none !important;
}

.form-control,
.btn.dropdown-toggle,
.datepicker input,
.select2-container--default .select2-selection--single,
.btn-action-primary,
.select2-selection.select2-selection--single,
.custom-file-input,
.custom-file {
  height: calc(1.5em + 0.75rem + 3px) !important;
  /* box-shadow: 0px 2px 14px 0px #d5d5d538!important; */
}

.btn-action-primary,
.btn-action-primary:hover {
  height: calc(1.5em + 0.75rem + 2px) !important;
  border: none !important;
}

.btn-action-primary,
.btn-action-secondary {
  min-width: 84px;
}

.select2-dropdown {
  border: none !important;
  top: 3px;
}

.dropdown-item {
  padding: .65rem 1.25rem !important;
  transition: all .25s;
}

.c-header .c-header-nav .c-header-nav-link,
.c-header .c-header-nav .c-header-nav-btn {
  color: rgba(0, 0, 21, 0.6) !important;
}

.dropdown-item.active,
.dropdown-item:active {
  color: var(--primary-legacy-theme) !important;
  background-color: #ebedef !important;
}

.dropdown-item.active,
.dropdown-item:active svg {
  fill: var(--primary-legacy-theme) !important;
}

.select2-dropdown,
.vc-popover-content {
  -webkit-box-shadow: 0 4px 5px 0 rgba(60, 75, 100, .14), 0 1px 10px 0 rgba(60, 75, 100, .12), 0 2px 4px -1px rgba(60, 75, 100, .20);
  box-shadow: 0 4px 5px 0 rgba(60, 75, 100, .14), 0 1px 10px 0 rgba(60, 75, 100, .12), 0 2px 4px -1px rgba(60, 75, 100, .20);
}

.select2-results__option.select2-results__message {
  position: relative;
  z-index: 1;
  display: block;
}

.select2-results__option.select2-results__message:before {
  content: 'Danh sách trống!';
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  height: 100%;
  opacity: 1;
  z-index: 999;
  display: block;
  z-index: 1;
  background: white;
  width: 100%;
  padding-left: .25rem;
  color: rgb(150, 150, 150);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--primary-thin-legacy-theme) !important;
}

.select2-container--default .select2-results__option--selected[aria-selected],
.select2-container--default .select2-results__option[aria-selected=true].select2-results__option--selected {
  background-color: rgba(37, 99, 235, 0.16) !important;
  color: #1e3a8a !important;
  font-weight: 700 !important;
}

.c-app:not(.c-legacy-theme):not(.c-dark-theme) .c-header.c-header-fixed {
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.06) !important;
}

.c-main {
  padding-top: 0 !important;
}

/*
 * CModal / Bootstrap modal: phải vẽ trên .c-sidebar-fixed và .c-header-fixed (~1019–1030).
 * Không đặt z-index trên .c-main: tạo stacking context mới, toàn bộ con (kể cả .modal z-index 1050)
 * vẫn nằm *dưới* sidebar so với cây .c-app.
 */
.c-app .modal-backdrop {
  z-index: 1050 !important;
}
.c-app .modal {
  z-index: 1055 !important;
}
/* BaseModal: append vào body, không còn trong .c-app — vẫn trên header/sidebar CoreUI */
.base-modal-portal .modal-backdrop {
  z-index: 1050 !important;
}
.base-modal-portal .modal {
  z-index: 1055 !important;
}

/* Nút đóng BaseModal: ký tự × rõ ràng (CoreUI CButtonClose / btn-close dễ “mất” theo theme) */
.base-modal-portal .modal-header .base-modal-close-btn {
  flex-shrink: 0;
  float: none !important;
  margin: 0 !important;
  padding: 0.2rem 0.45rem !important;
  line-height: 1 !important;
  font-size: 0 !important;
  opacity: 1 !important;
  color: rgba(255, 255, 255, 0.95) !important;
  text-shadow: none !important;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.base-modal-portal .modal-header .base-modal-close-btn:hover {
  color: #fff !important;
}

.base-modal-portal .modal-header .base-modal-close-btn__glyph {
  font-size: 1.75rem;
  font-weight: 300;
  line-height: 1;
  display: block;
}

/*
 * SlideShowModalChooseFile (BaseModal + portal): trước đây body max-height 80vh + header/footer
 * vượt viewport → cắt mép trên (mất nút đóng). Chỉ body cuộn, dialog max-height theo viewport.
 */
.base-modal-portal.slideshow-choose-file-modal .modal-dialog {
  max-height: calc(100vh - 2.5rem);
  margin-top: 1rem;
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 0;
}

.base-modal-portal.slideshow-choose-file-modal .modal-dialog .modal-content.slideshow-choose-file-modal__content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
  width: 100%;
  overflow: hidden !important;
}

.base-modal-portal.slideshow-choose-file-modal .modal-header {
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}

.base-modal-portal.slideshow-choose-file-modal .modal-header .modal-title {
  flex: 1 1 auto;
  min-width: 0;
  margin-right: 0.75rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.base-modal-portal.slideshow-choose-file-modal .modal-header .close,
.base-modal-portal.slideshow-choose-file-modal .modal-header .base-modal-close-btn,
.base-modal-portal.slideshow-choose-file-modal .modal-header .c-close,
.base-modal-portal.slideshow-choose-file-modal .modal-header .btn-close,
.base-modal-portal.slideshow-choose-file-modal .modal-header button[aria-label] {
  flex-shrink: 0 !important;
  margin: 0 !important;
  opacity: 1 !important;
  color: rgba(255, 255, 255, 0.95) !important;
}

.base-modal-portal.slideshow-choose-file-modal .modal-body.slideshow-choose-file-modal__body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none !important;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.base-modal-portal.slideshow-choose-file-modal .modal-footer {
  flex-shrink: 0;
  padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
}

/* Tooltip / popover append-to-body vẫn trên modal (khi không ép z-index trên .c-main) */
body > .tooltip,
body > .popover {
  z-index: 1090 !important;
}

/* Nền tổng thể: xám xanh nhạt – bớt chói, tách lớp với thẻ trắng */
.c-app {
  background-color: #f5f7fb !important;
}

.sub-header-wrapper {
  width: 100%;
  padding-left: 1.75rem;
  padding-right: 1.75rem;
  background: #f5f7fb !important;
  border-bottom: 1px solid #e2e8f0;
}

.sub-header-wrapper > div {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  /* border-bottom: 1px solid #d9e2ef; */
}

.title-page {
  white-space: nowrap;
  margin-right: 15px;
}

.c-header .c-subheader {
  background: transparent !important;
  margin-top: 0 !important;
  width: unset !important;
  min-height: 44px !important;
}

td.group-action .btn,
td.group-action button {
  -webkit-box-shadow: 0 1px 15px 0 rgba(60, 75, 100, .14), 0 2px 1px -1px rgba(60, 75, 100, .12), 0 1px 3px 0 rgba(60, 75, 100, .20) !important;
  box-shadow: 0 1px 15px 0 rgba(60, 75, 100, .14), 0 2px 1px -1px rgba(60, 75, 100, .12), 0 1px 3px 0 rgba(60, 75, 100, .20) !important;
}

.c-app:not(.c-legacy-theme):not(.c-dark-theme) .card {
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 4px 14px rgba(15, 23, 42, 0.04) !important;
  border: 1px solid #dce1e8 !important;
  background: #fff !important;
}

.card {
  border-radius: .5rem !important;
}

.modal-dialog .modal-content {
  border-radius: 18px !important;
  background: #fff !important;
  /* shadow mạnh hơn để nổi rõ trên overlay */
  box-shadow: 0 26px 70px rgba(2, 6, 23, 0.22), 0 18px 45px rgba(15, 23, 42, 0.14) !important;
  overflow: hidden !important;
}

/* Modal thêm lịch (#addSchedule): CoreUI .modal.overflow-auto + overflow hidden trên content cắt dropdown multiselect */
.c-app .modal.show:has(#addSchedule),
.c-app .modal.d-block:has(#addSchedule) {
  overflow: visible !important;
}

.c-app .modal.show:has(#addSchedule) .modal-dialog .modal-content,
.c-app .modal.d-block:has(#addSchedule) .modal-dialog .modal-content {
  overflow: visible !important;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
  width: 100%;
}

/* Giữ toàn bộ modal (header + body + footer) trong viewport — footer không bị đẩy xuống dưới màn hình */
.c-app .modal.show:has(#addSchedule) .modal-dialog,
.c-app .modal.d-block:has(#addSchedule) .modal-dialog {
  max-height: calc(100vh - 2.5rem);
  margin-top: 1rem;
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 0;
}

.c-app .modal.show:has(#addSchedule) .modal-header,
.c-app .modal.d-block:has(#addSchedule) .modal-header {
  flex-shrink: 0;
}

.c-app .modal.show:has(#addSchedule) .modal-body.schedule-add-modal-body,
.c-app .modal.d-block:has(#addSchedule) .modal-body.schedule-add-modal-body {
  overflow: visible !important;
  max-height: none !important;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.c-app .modal.show:has(#addSchedule) .modal-footer,
.c-app .modal.d-block:has(#addSchedule) .modal-footer {
  flex-shrink: 0;
  padding-top: 16px !important;
  padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important;
}

/* Cuộn nội dung form trong body; chiều cao do flex cha giới hạn (không dùng 82vh — tránh vượt viewport) */
.schedule-add-modal-inner {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-x: hidden;
  overflow-y: auto;
  padding-bottom: 1rem;
  -webkit-overflow-scrolling: touch;
}

.c-app .modal.show:has(#addSchedule) .multiselect.multiselect--active .multiselect__content-wrapper,
.c-app .modal.d-block:has(#addSchedule) .multiselect.multiselect--active .multiselect__content-wrapper {
  z-index: 1060 !important;
}

/* phòng trường hợp CModal render lệch selector */
.modal-content {
  box-shadow: 0 26px 70px rgba(2, 6, 23, 0.22), 0 18px 45px rgba(15, 23, 42, 0.14) !important;
}

/* Header modal theo theme primary */
.modal-header {
  padding: .9rem 1rem !important;
  background: linear-gradient(135deg, rgba(37, 99, 235, 1) 0%, rgba(29, 78, 216, 1) 100%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.modal-header .modal-title {
  color: #fff !important;
}

.modal-header .close {
  color: rgba(255, 255, 255, 0.95) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

.modal-header .close:hover {
  color: #fff !important;
}

.modal-body {
  padding: 18px 20px !important;
}

.c-subheader.px-3 {
  display: inline-flex;
  align-items: center;
}

.c-subheader.px-3 ol li {
  display: inline-flex;
  align-items: center;
  font-size: .92em;
  margin-top: 5px;
}

.form-group {
  margin-bottom: 0px !important;
  margin-top: 1rem !important;
}

.form-group.no-label {
  margin-top: 0 !important;
}

.form-control:disabled,
.form-control[readonly] {
  background: #fff !important;
  cursor: not-allowed;
}

.c-app .c-body .c-main .dropdown:hover button {
  box-shadow: none !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 34px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  top: 5px !important;
  right: 10px !important;
}

.select2-selection.select2-selection--single,
.form-control,
.btn.dropdown-toggle:not(.dropdown-toggle-split),
.datepicker input,
.c-app .c-body .c-main .dropdown button.btn {
  border: 1px solid #d8dee6 !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

.c-app:not(.c-legacy-theme):not(.c-dark-theme) .card .form-control,
.c-app:not(.c-legacy-theme):not(.c-dark-theme) .card .btn.dropdown-toggle:not(.dropdown-toggle-split) {
  background: #fff !important;
}

.select2.select2-container,
.select2-container--default .select2-selection--single,
.dropdown.btn-group,
.form-control,
.btn.dropdown-toggle:not(.dropdown-toggle-split),
.datepicker input,
.select2-search__field {
  border-radius: .4rem !important;
}

.datepicker input:hover {
  box-shadow: none !important;
}

.datepicker input:focus {
  box-shadow: none !important;
  border-color: var(--primary-legacy-theme) !important;
}

.datepicker {
  position: relative;
  display: inline-flex;
  width: 100%;
  height: 36px;
}

.datepicker input {
  padding-left: 2.25rem !important;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
  width: 100%;
}

.datepicker input,
.form-control,
.form-control:focus,
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #4f5d73 !important;
}

.datepicker:after {
  font-family: FontAwesome;
  font-size: .95em;
  content: "\f073";
  padding-right: 0 !important;
  vertical-align: middle;
  font-weight: 900;
  position: absolute;
  left: 0.75rem;
  top: 50%;
  line-height: 1;
  transform: translateY(-50%);
  color: #717171;
}

.vc-bg-blue-200 {
  background-color: #dfecfb !important;
}

.vc-bg-blue-600 {
  background-color: var(--primary-legacy-theme) !important;
}

.vc-border-blue-700 {
  border-color: var(--primary-legacy-theme) !important;
}

.c-wrapper:not(.c-wrapper-fluid) {
  height: unset !important;
  min-height: 100vh;
}

.dropdown.btn-group {
  min-width: 100%;
}

.dropdown.btn-group .dropdown-menu {
  transform: none !important;
  bottom: unset !important;
  left: 0;
  top: 100% !important;
}

.dropdown.btn-group button.btn {
  padding-right: 0;
}

button > i {
  font-size: 12px !important;
  margin: 0px !important;
}

.c-header .c-subheader {
  border-top: 0 !important;
  position: relative;
}

/* ========== Theme tokens (Sidebar + liên kết) ========== */
:root {
  --primary-legacy-theme: #2563eb !important;
  --primary-thin-legacy-theme: #3b82f6 !important;
  /* Sidebar – tông neutral + accent */
  --sidebar-bg-top: #f1f5f9;
  --sidebar-bg-bottom: #eef2f7;
  --sidebar-border: #e2e8f0;
  --sidebar-hover: rgba(37, 99, 235, 0.08);
  --sidebar-active-bg: linear-gradient(90deg, rgba(37, 99, 235, 0.12) 0%, rgba(37, 99, 235, 0.04) 100%);
  --sidebar-accent: #2563eb;
  --sidebar-text: #334155;
  --sidebar-text-strong: #0f172a;
  --sidebar-muted: #64748b;
  --breadcrumb-pill-bg: #ffffff;
  --breadcrumb-sep: #94a3b8;
}

/* ========== Sidebar – sáng, đồng bộ vùng nội dung ========== */
.c-sidebar {
  background: linear-gradient(180deg, var(--sidebar-bg-top) 0%, var(--sidebar-bg-bottom) 100%) !important;
  border-right: 1px solid var(--sidebar-border) !important;
}

.c-app:not(.c-legacy-theme):not(.c-dark-theme) .c-sidebar.c-sidebar-fixed[class*="-show"] {
  box-shadow: 4px 0 20px rgba(15, 23, 42, 0.06) !important;
  -webkit-box-shadow: 4px 0 20px rgba(15, 23, 42, 0.06) !important;
}

.c-sidebar .c-sidebar-brand,
.c-sidebar .c-sidebar-minimizer {
  background: rgba(255, 255, 255, 0.9) !important;
}

.c-sidebar-brand {
  border-bottom: 1px solid var(--sidebar-border) !important;
  flex: 0 0 auto !important;
  min-height: 52px;
  padding: 0.65rem 0.5rem !important;
}

.c-sidebar .c-sidebar-brand span {
  color: var(--sidebar-muted) !important;
  font-size: 0.825rem !important;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.35;
  margin-top: 0.35rem;
  display: block;
}

.c-sidebar-nav {
  background: transparent !important;
  padding: 0.5rem 0.6rem 1rem !important;
}

.c-sidebar .c-sidebar-nav-dropdown.c-show {
  background: transparent !important;
}

ul.c-sidebar-nav {
  padding-top: 0.3rem !important;
  font-size: 0.875rem !important;
  font-weight: 500;
  letter-spacing: 0.015em;
}

.c-sidebar-nav-icon {
  fill: var(--sidebar-muted) !important;
  opacity: 1;
}

.c-sidebar .c-sidebar-nav-link,
.c-sidebar .c-sidebar-nav-dropdown-toggle {
  color: var(--sidebar-text) !important;
  white-space: break-spaces;
  border-radius: 10px;
  margin: 3px 0;
  padding: 0.62rem 0.9rem !important;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

a.c-sidebar-nav-link,
a.c-sidebar-nav-dropdown-toggle {
  padding: 0.62rem 0.9rem !important;
}

.c-sidebar .c-sidebar-nav-link:hover,
.c-sidebar .c-sidebar-nav-dropdown-toggle:hover {
  background: var(--sidebar-hover) !important;
  color: var(--sidebar-text-strong) !important;
}

.c-sidebar .c-sidebar-nav-link:hover .c-sidebar-nav-icon,
.c-sidebar .c-sidebar-nav-dropdown-toggle:hover .c-sidebar-nav-icon {
  fill: var(--sidebar-accent) !important;
  opacity: 1;
}

/* CoreUI dùng border để vẽ caret. Một số rule khác có thể set opacity thấp → ép lại đầy đủ */
.c-sidebar .c-sidebar-nav-dropdown-toggle::after,
.c-sidebar a.c-sidebar-nav-dropdown-toggle::after {
  height: 9px !important;
  width: 0 !important;
  opacity: 1 !important;
  filter: none !important;
  border-top: 0.3em solid #475569 !important; /* đậm hơn để dễ nhìn */
  border-right: 0.3em solid transparent !important;
  border-left: 0.3em solid transparent !important;
  border-bottom: 0 !important;
}

/* Hover/Active: mũi tên nổi bật theo primary */
.c-sidebar .c-sidebar-nav-dropdown-toggle:hover::after,
.c-sidebar .c-active.c-sidebar-nav-dropdown-toggle::after {
  opacity: 1 !important;
  border-top-color: var(--sidebar-accent) !important;
}

/* =========================
   AUTH PAGES (Login/Forgot/OTP/Reset)
   - CSS chung, không đụng logic
   ========================= */
.auth-page--cms {
  min-height: 100vh;
  background:
    radial-gradient(900px 520px at 12% 18%, rgba(37, 99, 235, 0.16), rgba(37, 99, 235, 0) 58%),
    radial-gradient(700px 420px at 86% 12%, rgba(59, 130, 246, 0.14), rgba(59, 130, 246, 0) 55%),
    radial-gradient(900px 520px at 88% 82%, rgba(22, 163, 74, 0.10), rgba(22, 163, 74, 0) 60%),
    linear-gradient(180deg, #f7f9fd 0%, #f3f6fb 100%);
  display: flex;
  align-items: center;
  padding: 28px 18px;
}

/* =========================
   AUTH PAGES v2 (closer to provided mẫu)
   - override block ở trên để giống bố cục mẫu hơn
   ========================= */
.auth-page--cms {
  padding: 0 !important;
  align-items: stretch !important;
  overflow-x: hidden; /* chặn tràn ngang do pattern/illustration */
  background:
    radial-gradient(1200px 700px at 10% 12%, rgba(37, 99, 235, 0.14), rgba(37, 99, 235, 0) 60%),
    radial-gradient(900px 520px at 88% 14%, rgba(59, 130, 246, 0.12), rgba(59, 130, 246, 0) 58%),
    linear-gradient(180deg, #f7f9fd 0%, #f2f5fb 100%) !important;
}

.auth-page--cms .auth-page__inner {
  max-width: 1640px !important;
  margin: 0 auto !important;
  min-height: 100vh !important;
  grid-template-columns: 1.55fr 600px !important;
  gap: 64px !important;
  padding: 40px 32px !important;
  align-items: stretch !important;
  width: 100%;
  box-sizing: border-box;
}

.auth-page--cms.auth-page--simple .auth-page__inner {
  max-width: 620px !important;
  grid-template-columns: 1fr !important;
  padding: 42px 18px !important;
}

.auth-page--cms .auth-page__brand {
  display: block !important;
  padding: 0 !important;
  overflow: hidden; /* cắt illustration/pattern trong khung trái */
  height: 100%;
}

@media (max-width: 991.98px) {
  .auth-page--cms .auth-page__inner {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
    padding: 26px 16px !important;
  }
  .auth-page--cms .auth-page__brand {
    display: none !important;
  }
}

.auth-page--cms .auth-page__brand-bg {
  border-radius: 22px !important;
  border: 1px solid rgba(226, 232, 240, 0.95) !important;
  background:
    linear-gradient(155deg, rgba(255, 255, 255, 0.92) 0%, rgba(241, 245, 249, 0.92) 55%, rgba(237, 242, 247, 0.95) 100%) !important;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.08);
}

.auth-page--cms .auth-page__brand-pattern {
  position: absolute;
  inset: -200px -260px auto auto !important;
  width: min(920px, 140vw) !important;
  height: min(880px, 130vh) !important;
  transform: rotate(6deg) !important;
  opacity: 0.72 !important;
  pointer-events: none;
  /* Một blob ellipse — tránh 2 vòng tròn gây “vách dọc” giữa khối màu */
  background: radial-gradient(
    ellipse 95% 80% at 78% 22%,
    rgba(37, 99, 235, 0.13) 0%,
    rgba(59, 130, 246, 0.07) 32%,
    rgba(147, 197, 253, 0.035) 55%,
    rgba(219, 234, 254, 0.015) 72%,
    rgba(255, 255, 255, 0) 82%
  ) !important;
  max-width: none;
}

.auth-page--cms .auth-page__brand-content {
  position: relative;
  z-index: 10 !important;
  isolation: isolate;
  /* Bottom vừa đủ chừa minh họa góc — tránh padding khổng lồ gây tràn dọc */
  padding: 24px 28px clamp(28px, 8vh, 72px) !important;
  max-width: 680px !important;
  box-sizing: border-box;
}

/* Nền sáng phía sau chữ — minh họa ::after không “nuốt” độ đọc */
.auth-page--cms .auth-page__brand-content::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -12px;
  left: -20px;
  right: 18%;
  bottom: clamp(40px, 8vh, 100px);
  background: linear-gradient(
    118deg,
    rgba(255, 255, 255, 0.99) 0%,
    rgba(248, 250, 252, 0.94) 38%,
    rgba(241, 245, 249, 0.55) 68%,
    rgba(241, 245, 249, 0.18) 86%,
    rgba(241, 245, 249, 0) 100%
  );
  border-radius: 18px;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}

.auth-page--cms .auth-page__brand-content > * {
  position: relative;
  z-index: 1;
}

.auth-page--cms .auth-page__brand::after {
  z-index: 0 !important;
  right: 26px !important;
  bottom: 18px !important;
  width: clamp(360px, 42vw, 600px) !important;
  height: clamp(260px, 30vw, 440px) !important;
  opacity: 0.5 !important;
  max-width: calc(100% - 32px);
}

/* Màn hình thấp: padding gọn, tránh overflow */
@media (max-height: 780px) and (min-width: 992px) {
  .auth-page--cms .auth-page__brand-content {
    padding: 20px 22px 24px !important;
  }
  .auth-page--cms .auth-page__brand::after {
    bottom: 10px !important;
    width: clamp(300px, 36vw, 480px) !important;
    height: clamp(200px, 24vw, 320px) !important;
    opacity: 0.38 !important;
  }
}

.auth-page--cms .auth-page__brand-pattern {
  z-index: 0;
}

.auth-page--cms .auth-page__brand-bg {
  z-index: 0;
}

.auth-page--cms .auth-page__logo img {
  width: 96px !important;
}

.auth-page--cms .auth-page__brand-title {
  font-size: 44px !important;
  line-height: 1.2;
  margin-top: 20px !important;
  display: block !important;
  width: 100% !important;
  margin-bottom: 12px !important;
  color: #020617 !important;
  text-shadow:
    0 0 1px rgba(255, 255, 255, 1),
    0 1px 0 rgba(255, 255, 255, 0.95),
    0 0 24px rgba(255, 255, 255, 0.9);
}

.auth-page--cms .auth-page__brand-subtitle,
.auth-page--cms .auth-page__brand-desc {
  font-size: 18px !important;
  color: #1e293b !important;
  font-weight: 600 !important;
  max-width: 620px;
  margin-bottom: 20px !important;
  display: block !important;
  width: 100% !important;
  margin-top: 0 !important;
  text-shadow:
    0 0 1px rgba(255, 255, 255, 1),
    0 0 18px rgba(255, 255, 255, 0.85);
}

.auth-page--cms .auth-page__brand-features {
  gap: 14px !important;
  max-width: 620px;
}

.auth-page--cms .auth-page__brand-features-icon {
  border-radius: 12px !important;
  background: rgba(37, 99, 235, 0.10) !important;
  border: 1px solid rgba(37, 99, 235, 0.18);
}

.auth-page--cms .auth-page__brand-features li {
  display: grid !important;
  grid-template-columns: 40px 1fr !important;
  gap: 14px !important;
  align-items: start !important;
}

.auth-page--cms .auth-page__brand-features-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  min-width: 0 !important;
}

.auth-page--cms .auth-page__brand-features-title {
  display: block !important;
  font-weight: 800 !important;
  font-size: 17.5px !important;
  color: #020617 !important;
  line-height: 1.3 !important;
  text-shadow:
    0 0 1px rgba(255, 255, 255, 1),
    0 1px 0 rgba(255, 255, 255, 0.9),
    0 0 16px rgba(255, 255, 255, 0.75);
}

.auth-page--cms .auth-page__brand-features-desc {
  display: block !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #334155 !important;
  line-height: 1.55 !important;
  text-shadow:
    0 0 1px rgba(255, 255, 255, 1),
    0 0 14px rgba(255, 255, 255, 0.8);
}

.auth-page--cms .auth-page__form-side {
  align-items: center;
  padding: 0 !important;
}

.auth-page--cms .auth-page__wrap {
  width: 100% !important;
  max-width: 640px !important;
}

/* Gộp 1 bóng mềm — tránh chồng với .card CoreUI tạo vệt tối cứng dưới đáy */
.auth-page--cms .auth-page__card,
.auth-page--cms .card.auth-page__card {
  border-radius: 22px !important;
  -webkit-box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 10px 32px -8px rgba(15, 23, 42, 0.1),
    0 0 0 1px rgba(15, 23, 42, 0.04) !important;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 10px 32px -8px rgba(15, 23, 42, 0.1),
    0 0 0 1px rgba(15, 23, 42, 0.04) !important;
}

.auth-page--cms .auth-page__card-body {
  padding: 40px 40px 32px !important;
}

.auth-page--cms .auth-page__flag {
  width: 68px !important;
  height: 68px !important;
  border-radius: 18px !important;
}

.auth-page--cms .auth-page__flag svg,
.auth-page--cms .auth-page__flag .c-icon {
  transform: scale(1.75);
}

.auth-page--cms .auth-page__title {
  font-size: 24px !important;
}

.auth-page--cms .auth-page__subtitle {
  font-size: 13.5px !important;
}

.auth-page--cms .auth-page__field :is(input, .form-control) {
  height: 54px;
  border-radius: 14px !important;
  font-size: 16px;
}

.auth-page--cms .auth-page__field input::placeholder {
  font-size: 15px;
}

.auth-page--cms .auth-page__divider span {
  background: #fff !important;
}

/* Google button – modern outline, giống mẫu nhưng sạch hơn */
.auth-btn-google {
  height: 54px !important;
  border-radius: 14px !important;
  background: #fff !important;
  border: 1px solid rgba(226, 232, 240, 0.95) !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
  color: #0f172a !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em;
}

/* Buttons (primary/neutral/google) – cao hơn, dễ thao tác */
.auth-btn-primary,
.auth-btn-neutral,
.auth-btn-google {
  height: 56px !important;
  border-radius: 16px !important;
  font-size: 15.5px !important;
}

/* Tăng khoảng cách giữa các nút để đỡ sát */
.auth-page--cms .auth-page__btn-row {
  gap: 14px !important;
  margin-top: 10px;
}

/* Quên mật khẩu: nút Tiếp tục + quay lại */
.auth-page--cms .auth-page__btn-row--forget {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 12px !important;
  margin-top: 6px !important;
}

.auth-page--cms .auth-btn-primary--continue {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.28), 0 2px 6px rgba(37, 99, 235, 0.12) !important;
}

.auth-page--cms .auth-btn-primary--continue .fa-long-arrow-right {
  font-size: 16px;
  opacity: 0.95;
  transition: transform 0.2s ease;
}

.auth-page--cms .auth-btn-primary--continue:hover .fa-long-arrow-right {
  transform: translateX(4px);
}

.auth-page--cms .auth-page__link-back {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  min-height: 48px !important;
  padding: 10px 18px !important;
  margin: 0 auto !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  border-radius: 14px !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  color: #64748b !important;
  text-decoration: none !important;
  border: 1px solid rgba(226, 232, 240, 0.95) !important;
  background: rgba(248, 250, 252, 0.85) !important;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.auth-page--cms .auth-page__link-back .fa-arrow-left {
  font-size: 14px;
  opacity: 0.85;
  transition: transform 0.2s ease;
}

.auth-page--cms .auth-page__link-back:hover {
  color: #2563eb !important;
  background: rgba(37, 99, 235, 0.06) !important;
  border-color: rgba(37, 99, 235, 0.2) !important;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.08) !important;
}

.auth-page--cms .auth-page__link-back:hover .fa-arrow-left {
  transform: translateX(-3px);
}

/* Bảo mật / hỗ trợ – gọn, icon + nhãn ngắn (tooltip đầy đủ) */
.auth-page--cms .auth-page__brand-trust {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 100%;
}

.auth-page--cms .auth-page__trust-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(226, 232, 240, 0.95);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.05);
  cursor: default;
}

.auth-page--cms .auth-page__trust-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(37, 99, 235, 0.12);
  color: #2563eb;
  font-size: 15px;
  flex-shrink: 0;
}

.auth-page--cms .auth-page__trust-label {
  font-size: 14px;
  font-weight: 700;
  color: #334155;
  white-space: nowrap;
  letter-spacing: 0.01em;
}

/* BaseInput (CInput) – to, rõ ràng, dễ nhìn trong auth */
.auth-page--cms .form-input-wrapper {
  width: 100%;
}

.auth-page--cms .form-input-wrapper .col-form-label,
.auth-page--cms .form-input-wrapper label[slot="label"],
.auth-page--cms .form-input-wrapper label {
  font-size: 14.5px !important;
  font-weight: 700 !important;
  color: #334155 !important;
  margin-bottom: 8px !important;
  letter-spacing: 0.01em;
}

.auth-page--cms .form-input-wrapper .form-control {
  height: 54px !important;
  padding: 14px 16px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(226, 232, 240, 0.95) !important;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.05) !important;
  background: #fff !important;
}

.auth-page--cms .form-input-wrapper .form-control:focus {
  border-color: rgba(37, 99, 235, 0.55) !important;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.14), 0 10px 22px rgba(15, 23, 42, 0.05) !important;
}

.auth-page--cms .form-input-wrapper.input-valid-error .form-control,
.auth-page--cms .form-input-wrapper .form-control.input-valid-error {
  border-color: rgba(220, 38, 38, 0.55) !important;
}

/* Một số màn dùng .form-group.input-valid-error.no-label (không đi qua .form-input-wrapper) */
.auth-page--cms .form-group.input-valid-error :is(input.form-control, textarea.form-control, .form-control) {
  border-color: rgba(220, 38, 38, 0.65) !important;
}

.auth-page--cms .form-group.input-valid-error :is(input.form-control, textarea.form-control, .form-control):focus {
  border-color: rgba(220, 38, 38, 0.75) !important;
  box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.14), 0 10px 22px rgba(15, 23, 42, 0.05) !important;
}

.auth-page--cms .form-input-wrapper .valid-error {
  margin-top: 6px;
  font-size: 12.5px;
  font-weight: 600;
}

.auth-btn-google svg {
  flex: 0 0 auto;
}

.auth-btn-google:hover {
  background: #fbfdff !important;
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
}

/* Mobile: card full-width, giảm padding */
@media (max-width: 575.98px) {
  .auth-page--cms .auth-page__card-body {
    padding: 22px 18px 16px !important;
  }
}

/* Khớp với block auth-page v2 phía trên — tránh ghi đè cột trái/phải */
.auth-page--cms .auth-page__inner {
  width: 100%;
  max-width: 1650px !important;
  margin: 0 auto !important;
  display: grid;
  grid-template-columns: 1.55fr 600px !important;
  gap: 64px !important;
  align-items: stretch !important;
  min-height: 100vh !important;
  padding: 40px 32px !important;
  box-sizing: border-box;
}

.auth-page--cms.auth-page--simple .auth-page__inner {
  grid-template-columns: 1fr !important;
  max-width: 620px !important;
  min-height: auto !important;
  padding: 42px 18px !important;
}

.auth-page--cms .auth-page__brand {
  position: relative;
  padding: 22px 10px;
  overflow: hidden;
  display: none;
}

@media (min-width: 992px) {
  .auth-page--cms .auth-page__brand {
    display: block;
  }
}

.auth-page--cms .auth-page__brand-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.86) 0%, rgba(241, 245, 249, 0.92) 100%);
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 20px;
}

.auth-page--cms .auth-page__brand-pattern {
  position: absolute;
  inset: -200px -260px auto auto;
  width: min(920px, 140vw);
  height: min(880px, 130vh);
  transform: rotate(6deg);
  opacity: 0.72;
  pointer-events: none;
  background: radial-gradient(
    ellipse 95% 80% at 78% 22%,
    rgba(37, 99, 235, 0.13) 0%,
    rgba(59, 130, 246, 0.07) 32%,
    rgba(147, 197, 253, 0.035) 55%,
    rgba(219, 234, 254, 0.015) 72%,
    rgba(255, 255, 255, 0) 82%
  );
}

.auth-page--cms .auth-page__brand-content {
  position: relative;
  z-index: 10;
  isolation: isolate;
  max-width: 680px;
  padding: 24px 28px clamp(28px, 8vh, 72px);
  box-sizing: border-box;
}

.auth-page--cms .auth-page__brand::after {
  content: "";
  position: absolute;
  z-index: 0;
  right: 14px;
  bottom: 10px;
  width: clamp(320px, 40vw, 560px) !important;
  height: clamp(240px, 28vw, 400px) !important;
  background: url("/static/img/illustration.png") no-repeat right bottom;
  background-size: contain;
  opacity: 0.5;
  filter: drop-shadow(0 18px 30px rgba(15, 23, 42, 0.1));
  pointer-events: none;
}

.auth-page--cms .auth-page__logo img {
  width: 92px;
  height: auto;
}

.auth-page--cms .auth-page__brand-title {
  margin-top: 18px;
  margin-bottom: 10px;
  font-size: 44px;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: #020617;
  display: block;
  width: 100%;
  margin-bottom: 12px;
  text-shadow:
    0 0 1px #fff,
    0 1px 0 rgba(255, 255, 255, 0.95),
    0 0 24px rgba(255, 255, 255, 0.9);
}

.auth-page--cms .auth-page__brand-subtitle,
.auth-page--cms .auth-page__brand-desc {
  color: #1e293b;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 18px;
  display: block;
  width: 100%;
  margin-top: 0;
  text-shadow: 0 0 1px #fff, 0 0 18px rgba(255, 255, 255, 0.85);
}

.auth-page--cms .auth-page__brand-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}

.auth-page--cms .auth-page__brand-features li {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 14px;
  align-items: start;
}

.auth-page--cms .auth-page__brand-features-icon {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(37, 99, 235, 0.10);
  color: #2563eb;
}

.auth-page--cms .auth-page__form-side {
  position: relative;
  display: grid;
  place-items: center;
  padding: 0;
}

.auth-page--cms .auth-page__form-side--center {
  grid-column: 1 / -1;
}

.auth-page--cms .auth-page__form-side-pattern {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(700px 420px at 50% 0%, rgba(37, 99, 235, 0.08), rgba(37, 99, 235, 0) 62%);
}

.auth-page--cms .auth-page__wrap {
  position: relative;
  width: min(460px, 94vw);
}

.auth-page--cms .auth-page__card,
.auth-page--cms .card.auth-page__card {
  border: 1px solid var(--border, #e2e8f0) !important;
  border-radius: 22px !important;
  -webkit-box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 10px 32px -8px rgba(15, 23, 42, 0.1),
    0 0 0 1px rgba(15, 23, 42, 0.04) !important;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 10px 32px -8px rgba(15, 23, 42, 0.1),
    0 0 0 1px rgba(15, 23, 42, 0.04) !important;
  background: #fff !important;
}

.auth-page--cms .auth-page__card-body {
  padding: 26px 26px 20px !important;
}

.auth-page--cms .auth-page__head {
  text-align: center;
  margin-bottom: 14px;
}

.auth-page--cms .auth-page__flag {
  /* Đồng bộ với block phía trên (size lớn hơn) */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 68px !important;
  height: 68px !important;
  border-radius: 18px !important;
  background: #f1f5f9;
  border: 1px solid var(--border, #e2e8f0);
  margin-bottom: 10px;
}

.auth-page--cms .auth-page__title {
  font-weight: 800;
  font-size: 23px;
  margin: 0;
  color: #0f172a;
}

.auth-page--cms .auth-page__subtitle {
  margin: 6px 0 0;
  color: #64748b;
  font-size: 13px;
}

.auth-page--cms .auth-page__section {
  display: grid;
  gap: 12px;
}

.auth-page--cms .auth-page__field .input-wrapper {
  margin: 0;
}

.auth-page--cms .auth-page__field :is(input, .form-control) {
  border-radius: 12px !important;
}

.auth-page--cms .auth-page__meta {
  display: flex;
  justify-content: flex-end;
}

.auth-page--cms .auth-page__meta.auth-page__meta--center {
  justify-content: center;
}

.auth-link {
  color: var(--primary-legacy-theme) !important;
  font-weight: 600;
  font-size: 13px;
  text-decoration: none !important;
}

.auth-link:hover {
  opacity: 0.85;
}

.auth-page--cms .auth-page__btn-row {
  display: grid;
  gap: 10px;
  margin-top: 4px;
}

.auth-page--cms .auth-page__btn-row--inline {
  grid-template-columns: 1fr 1fr;
}

.auth-btn-primary,
.auth-btn-neutral,
.auth-btn-google {
  width: 100%;
  height: 42px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.08s ease;
}

.auth-btn-primary {
  background: var(--primary-legacy-theme) !important;
  border: 1px solid #1d4ed8 !important;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.18);
}

.auth-btn-primary:hover {
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.22);
  transform: translateY(-1px);
}

.auth-btn-neutral {
  background: #f1f5f9 !important;
  border: 1px solid var(--border, #e2e8f0) !important;
  color: #334155 !important;
}

.auth-btn-neutral:hover {
  background: #eaf0f7 !important;
  transform: translateY(-1px);
}

.auth-btn-google {
  background: #ffffff !important;
  border: 1px solid var(--border, #e2e8f0) !important;
  color: #0f172a !important;
}

.auth-btn-google:hover {
  background: #fbfdff !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
  transform: translateY(-1px);
}

.auth-page--cms .auth-page__divider {
  position: relative;
  display: grid;
  place-items: center;
  margin: 15px 0;
}

.auth-page--cms .auth-page__divider::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--border, #e2e8f0);
}

.auth-page--cms .auth-page__divider span {
  position: relative;
  padding: 0 12px;
  background: #fff;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/*
 * Tablet + mobile: block .auth-page__inner (dòng ~1027) ghi đè rule 1fr bằng 1.55fr 600px
 * → tràn ngang, thẻ lệch, scroll — bắt buộc 1 cột + căn giữa.
 */
@media (max-width: 991.98px) {
  .auth-page--cms {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    min-height: 100vh;
    min-height: 100dvh;
  }

  .auth-page--cms .auth-page__inner {
    grid-template-columns: minmax(0, 1fr) !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 20px 14px !important;
    gap: 0 !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    box-sizing: border-box !important;
    /* Căn giữa theo chiều dọc + ngang */
    display: grid !important;
    align-content: center !important;
    justify-items: center !important;
    align-items: center !important;
  }

  .auth-page--cms.auth-page--simple .auth-page__inner {
    justify-items: center !important;
    align-content: center !important;
    max-width: 100% !important;
    padding: 20px 14px !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
  }

  .auth-page--cms .auth-page__form-side {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    overflow-x: hidden !important;
  }

  .auth-page--cms .auth-page__form-side-pattern {
    background: radial-gradient(
      95% 55% at 50% -5%,
      rgba(37, 99, 235, 0.045),
      rgba(59, 130, 246, 0.02) 40%,
      transparent 65%
    ) !important;
  }

  .auth-page--cms .auth-page__wrap {
    width: 100% !important;
    max-width: min(440px, calc(100vw - 28px)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    position: relative;
  z-index: 1;
    box-sizing: border-box !important;
  }

  .auth-page--cms .auth-page__card,
  .auth-page--cms .auth-page__card.card,
  .auth-page--cms .card.auth-page__card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    /* Mobile: bóng nhẹ hơn nữa, không kéo dải tối dưới thẻ */
    -webkit-box-shadow:
      0 1px 3px rgba(15, 23, 42, 0.05),
      0 6px 20px -4px rgba(15, 23, 42, 0.08),
      0 0 0 1px rgba(226, 232, 240, 0.9) !important;
    box-shadow:
      0 1px 3px rgba(15, 23, 42, 0.05),
      0 6px 20px -4px rgba(15, 23, 42, 0.08),
      0 0 0 1px rgba(226, 232, 240, 0.9) !important;
  }

  .auth-page--cms .auth-btn-google {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    flex-wrap: nowrap !important;
    font-size: 13.5px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    gap: 8px !important;
    min-height: 48px !important;
    height: auto !important;
    box-sizing: border-box !important;
  }

  .auth-page--cms .auth-btn-google span {
    white-space: nowrap !important;
    flex-shrink: 0;
  }

  .auth-page--cms .auth-btn-google svg {
    flex-shrink: 0 !important;
  }
}

@media (max-width: 575.98px) {
  .auth-page--cms .auth-page__card-body {
    padding: 18px 16px 14px !important;
  }
  .auth-page--cms .auth-page__btn-row--inline {
    grid-template-columns: 1fr;
  }
  .auth-page--cms .auth-page__inner {
    padding: 16px 12px !important;
    /* Giữ min-height + align-content từ breakpoint 991 — vẫn căn giữa dọc */
    min-height: 100vh !important;
    min-height: 100dvh !important;
  }
  .auth-page--cms .auth-page__wrap {
    max-width: calc(100vw - 24px) !important;
  }
  .auth-page--cms .auth-btn-google {
    font-size: 12.5px !important;
    letter-spacing: -0.02em !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

@media (min-width: 992px) and (max-width: 1240px) {
  .auth-page--cms .auth-page__brand::after {
    width: 320px;
    height: 260px;
    opacity: 0.45;
  }
}

.c-sidebar .c-sidebar-nav-link.c-active,
.c-sidebar .c-active.c-sidebar-nav-dropdown-toggle {
  background: var(--sidebar-active-bg) !important;
  color: var(--sidebar-text-strong) !important;
  box-shadow: inset 3px 0 0 var(--sidebar-accent);
}

.c-sidebar .c-sidebar-nav-link.c-active .c-sidebar-nav-icon,
.c-sidebar .c-active.c-sidebar-nav-dropdown-toggle .c-sidebar-nav-icon {
  fill: var(--sidebar-accent) !important;
  opacity: 1;
}

.c-sidebar .c-sidebar-nav-link.c-active:before,
.c-sidebar .c-sidebar-nav-link.c-active:after,
.c-sidebar .c-active.c-sidebar-nav-dropdown-toggle:before {
  display: none !important;
}

/* Submenu: dấu chấm + đường dọc tinh gọn */
.c-sidebar-nav-dropdown-items .c-sidebar-nav-item a {
  position: relative;
}

.c-sidebar-nav-dropdown-items .c-sidebar-nav-item a:before {
  content: "";
  position: absolute;
  left: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--sidebar-muted);
  opacity: 0.55;
  z-index: 1;
}

.c-sidebar-nav-dropdown-items .c-sidebar-nav-item a:after {
  content: "";
  position: absolute;
  left: 1.42rem;
  top: 0;
  bottom: 0;
  border-left: 1px solid var(--sidebar-border);
}

html:not([dir="rtl"]) .c-sidebar-nav-dropdown-items .c-sidebar-nav-link,
html:not([dir="rtl"]) .c-sidebar-nav-dropdown-items .c-sidebar-nav-dropdown-toggle {
  padding-left: 2.6rem !important;
}

.c-sidebar-nav-dropdown-items .c-sidebar-nav-link.c-active:before {
  background: var(--sidebar-accent) !important;
  opacity: 1;
  box-shadow: 0 0 0 3px rgba(11, 152, 255, 0.25);
}

.c-sidebar-nav-dropdown-items .c-sidebar-nav-link.c-active:after {
  border-left-color: rgba(11, 152, 255, 0.35) !important;
}

.c-sidebar-fixed:not(.c-sidebar-unfoldable) .c-sidebar-nav-icon {
  margin-left: -0.45rem !important;
  flex: 0 0 44px !important;
  height: 1rem !important;
}

.c-sidebar-nav-dropdown.c-show + .c-sidebar-nav-dropdown.c-show {
  margin-top: 0 !important;
}

.c-sidebar-minimizer {
  border-top: 1px solid var(--sidebar-border) !important;
  background: #eef2f7 !important;
}

.c-sidebar-minimizer:hover {
  background: #e2e8f0 !important;
}

.c-sidebar-minimizer::before {
  filter: brightness(0.35);
  opacity: 0.7;
}

@media (min-width: 992px) {
  .c-sidebar {
    width: 252px !important;
  }

  html:not([dir="rtl"]) .c-sidebar.c-sidebar-lg-show:not(.c-sidebar-right).c-sidebar-fixed ~ .c-wrapper,
  html:not([dir="rtl"]) .c-sidebar.c-sidebar-show:not(.c-sidebar-right).c-sidebar-fixed ~ .c-wrapper {
    margin-left: 252px !important;
  }

  html:not([dir="rtl"]) .c-sidebar.c-sidebar-lg-show:not(.c-sidebar-right).c-sidebar-fixed.c-sidebar-minimized ~ .c-wrapper,
  html:not([dir="rtl"]) .c-sidebar.c-sidebar-lg-show:not(.c-sidebar-right).c-sidebar-fixed.c-sidebar-unfoldable ~ .c-wrapper,
  html:not([dir="rtl"]) .c-sidebar.c-sidebar-show:not(.c-sidebar-right).c-sidebar-fixed.c-sidebar-minimized ~ .c-wrapper,
  html:not([dir="rtl"]) .c-sidebar.c-sidebar-show:not(.c-sidebar-right).c-sidebar-fixed.c-sidebar-unfoldable ~ .c-wrapper {
    margin-left: 65px !important;
  }

  .c-sidebar-unfoldable:not(:hover).c-sidebar-fixed {
    width: 65px !important;
  }

  .c-sidebar-unfoldable:not(:hover).c-sidebar-fixed .c-sidebar-nav-icon {
    flex: 0 0 65px !important;
    height: 1.2rem !important;
  }
}

.c-header-nav,
.c-header-brand {
  min-height: 52px !important;
}

.c-header-nav .dropdown-menu {
  margin-top: .5rem !important;
}

.mt-3p5 {
  margin-top: 1.15rem;
}

/* ========== Breadcrumb – dễ đọc, kiểu “pill” nhẹ ========== */
.c-subheader {
  padding-top: 0.15rem !important;
  padding-bottom: 0.35rem !important;
}

.c-subheader .breadcrumb {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 0.35rem;
  margin: 0 !important;
  padding: 0.5rem 1.1rem !important;
  background: var(--breadcrumb-pill-bg) !important;
  border-radius: 8px;
  border: 1px solid #cdd4df;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.breadcrumb {
  padding: 0.5rem 0 !important;
}

.breadcrumb-item {
  position: relative;
  font-size: 0.8125rem;
  line-height: 1.4;
  display: inline-flex;
  align-items: center;
}

/* Một separator: chevron thay vì / trùng */
.breadcrumb-item + .breadcrumb-item {
  padding-left: 0;
}

.breadcrumb-item + .breadcrumb-item::before {
  content: "" !important;
  display: inline-block;
  width: 0.35rem;
  height: 0.35rem;
  margin-right: 0.55rem;
  border-right: 2px solid var(--breadcrumb-sep);
  border-bottom: 2px solid var(--breadcrumb-sep);
  transform: rotate(-45deg) translateY(-1px);
  padding: 0 !important;
  color: transparent !important;
  float: none;
  vertical-align: middle;
}

.breadcrumb-item + .breadcrumb-item::after {
  content: none !important;
  display: none !important;
}

.breadcrumb-item.active {
  color: #334155 !important;
  font-weight: 600;
  letter-spacing: 0.01em;
}

footer a,
.breadcrumb a {
  color: var(--primary-legacy-theme) !important;
  letter-spacing: 0.02rem;
  text-decoration: none !important;
  transition: color 0.2s ease, opacity 0.2s ease;
}

.breadcrumb a {
  color: #5c6b7d !important;
  font-weight: 500;
}

.breadcrumb a:hover {
  color: var(--primary-legacy-theme) !important;
}

@media (min-width: 768px) {

  .c-main > .container-fluid,
  .c-main > .container-sm,
  .c-main > .container-md,
  .c-main > .container-lg,
  .c-main > .container-xl {
    padding-right: 1.75rem !important;
    padding-left: 1.75rem !important;
  }
}

.c-header-toggler {
  min-width: 57px !important;
}

.c-footer {
  background: #fff !important;
  padding: 0 1.75rem !important;
  font-size: .85em;
}

.c-sidebar-minimizer,
.c-sidebar-minimizer:before,
.c-footer {
  flex: 0 0 36px !important;
  height: 36px !important;
}

.top-nav-wrapper {
  display: flex;
  width: 100%;
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  z-index: 999;
}

.spinner-grow.text-primary.text-primary {
  color: var(--primary-legacy-theme) !important;
}

.action-btn-wrapper {
  display: flex;
}

.modal-title {
  font-size: .9rem;
  font-weight: 600;
  text-transform: uppercase;
}

.modal-body label {
  margin-bottom: 0 !important;
}

.modal-header .close {
  color: #333333;
}

.modal-footer {
  padding: 14px 20px !important;
  display: flex !important;
  justify-content: flex-end !important;
  /* gap: 12px !important; */
  background: #f8fafc !important;
  border-top: 1px solid rgba(226, 232, 240, 0.9) !important;
}

.action-btn-wrapper button {
  width: 30px;
  height: 30px;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: .2rem;
  -webkit-box-shadow: 0 1px 8px 0 rgba(60, 75, 100, .08), 0 2px 1px -1px rgba(60, 75, 100, .08), 0 1px 3px 0 rgba(60, 75, 100, .08);
  box-shadow: 0 1px 8px 0 rgba(60, 75, 100, .08), 0 2px 1px -1px rgba(60, 75, 100, .08), 0 1px 3px 0 rgba(60, 75, 100, .08);
}

.btn.btn-primary[disabled] {
  cursor: no-drop !important;
  box-shadow: unset !important;
}

.btn-primary,
.btn-secondary {
  transition: all ease-out .3s;
  white-space: nowrap;
}

.btn-primary:hover {
  box-shadow: 0 6px 14px rgba(37, 99, 235, 0.18) !important;
}

.btn-primary:active,
.btn-secondary:active {
  transform: scale(.97);
}

.btn-primary:active {
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.16) !important;
  transform: scale(.98);
}

.btn-secondary:hover {
  box-shadow: 0 3px 10px rgba(100, 116, 139, 0.15) !important;
}

.btn-primary {
  background: var(--primary-legacy-theme) !important;
  border-color: #1d4ed8 !important;
  -webkit-box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08) !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08) !important;
}

.modal-footer .btn-primary,
.modal-footer .btn-secondary {
  height: 42px !important;
  padding: 0 18px !important;
  line-height: 1 !important;
  min-width: 96px !important;
  border-radius: 14px !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.10) !important;
}

.modal-footer .btn-primary {
  background: var(--primary-legacy-theme) !important;
  border: 1px solid #1d4ed8 !important;
  color: #fff !important;
}

.modal-footer .btn-primary:hover {
  box-shadow: 0 14px 32px rgba(37, 99, 235, 0.24) !important;
  transform: translateY(-1px) !important;
}

.modal-footer .btn-secondary {
  background: #e5e7eb !important;
  border: 1px solid #cbd5e1 !important;
  color: #334155 !important;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06) !important;
}

.modal-footer .btn-secondary:hover {
  background: #dbe1ea !important;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.10) !important;
  transform: translateY(-1px) !important;
}

.modal-footer .btn i,
.modal-footer .btn svg {
  font-size: 0.95em !important;
  line-height: 1 !important;
}

.btn-primary,
.btn-secondary {
  border-radius: 1rem !important;
}

.page-item.active .page-link {
  background: var(--primary-legacy-theme) !important;
  border-color: var(--primary-legacy-theme) !important;
}

.table th,
.table td {
  border-top-color: #edf2f9 !important;
}

.c-wrapper:not(.c-wrapper-fluid) .c-body {
  overflow: unset !important;
}

.page-item.disabled .page-link {
  border-color: #e5e9ee !important;
}

.active.page-item a {
  cursor: default !important;

}

.content-fade-in {
  opacity: 0;
  animation-name: fadeInBottom;
  animation-timing-function: ease-out;
  animation-duration: .4s;
  animation-fill-mode: forwards;
  animation-delay: .1s;
}

@keyframes fadeInBottom {
  0% {
    opacity: 0;
    transform: translateY(35px);
  }

  50% {
    opacity: .35;
    transform: translateY(10px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.vc-title {
  font-weight: 500 !important;
  font-size: .9em !important;
}

.vc-day-content {
  font-size: 14px !important;
  font-weight: 400 !important;
}

.vc-weekday {
  font-weight: 500 !important;
}

table thead th,
.vc-weekday {
  color: #6a88b5 !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid var(--primary-legacy-theme) !important;
}

.page-link:focus {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}

.table {
  margin-bottom: .75rem !important;
}

.pagination .page-link {
  padding: .3rem .65rem !important;
}

.page-item .page-link {
  color: var(--primary-legacy-theme) !important;
}

.page-item.active .page-link {
  color: #fff !important;
}

.page-item.disabled .page-link {
  color: #8a93a2 !important;
}

.row {
  margin-right: -10px !important;
  margin-left: -10px !important;
}

.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12,
.col,
.col-auto,
.col-sm-1,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-sm,
.col-sm-auto,
.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11,
.col-md-12,
.col-md,
.col-md-auto,
.col-lg-1,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-10,
.col-lg-11,
.col-lg-12,
.col-lg,
.col-lg-auto,
.col-xl-1,
.col-xl-2,
.col-xl-3,
.col-xl-4,
.col-xl-5,
.col-xl-6,
.col-xl-7,
.col-xl-8,
.col-xl-9,
.col-xl-10,
.col-xl-11,
.col-xl-12,
.col-xl,
.col-xl-auto {
  padding-right: 10px !important;
  padding-left: 10px !important;
}

.custom-control-input:checked ~ .custom-control-label::before {
  border-color: var(--primary-legacy-theme) !important;
  background-color: var(--primary-legacy-theme) !important;
}

.btn.btn-outline-info {
  background: #f4fdff;
}

.btn.btn-outline-danger {
  background: #fff5f5;
}

.dropdown:not(.btn-group) .btn.dropdown-toggle {
  min-width: 100%;
}

.select2-search--dropdown .select2-search__field {
  padding: 4px 6px !important;
}

.btn-action-primary {
  border-radius: 2rem !important;
  line-height: 1 !important;
}

.text-modal-important {
  font-weight: 600;
}

.text-modal-confirm {
  color: var(--primary-legacy-theme);
  font-weight: 700;
}

.modal-dialog .modal-header {
  border: none !important;
  background: var(--info-legacy-theme) !important;
  background: linear-gradient(to right, #b875fd 33.33%, #0093ff) !important;
  background: linear-gradient(to right, #6e50ff, #506bff, #0093ff) !important;
  color: #fff !important;
}

.dot-custom {
  font-size: .95em;
  letter-spacing: .03em;
  position: relative;
  line-height: 1;
  white-space: nowrap;
}

.dot-custom:not(.no-dot) {
  padding-left: 1em;
}

.dot-custom:not(.no-dot):after {
  width: 0.7em;
  height: 0.7em;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  content: '';
}

.dot-success {
  color: var(--success);
}

.dot-success:after {
  background: var(--success);
}

.dot-warning {
  color: var(--warning);
}

.dot-warning:after {
  background: var(--warning);
}

.dot-danger {
  color: var(--danger);
}

.dot-danger:after {
  background: var(--danger);
}

.dot-secondary {
  color: #9a9a9a;
}

.dot-secondary:after {
  background: #9a9a9a;
}

.mini-toastr-notification__title {
  display: none;
}

.mini-toastr .mini-toastr__notification {
  padding: 14px 8px !important;
  opacity: .95;
  animation: fade-toast .2s;
  animation-fill-mode: forwards;
}

.mini-toastr-notification__message {
  position: relative;
  padding-left: 3em !important;
  line-height: 1.4 !important;
  font-size: .95em !important;
  display: block !important;
  width: 100% !important;
}

.-success .mini-toastr-notification__message:after,
.-error .mini-toastr-notification__message:after,
.-warn .mini-toastr-notification__message:after {
  font-family: FontAwesome;
  font-size: 1.3em;
  padding-right: 0 !important;
  vertical-align: middle;
  font-weight: 900;
  position: absolute;
  left: 0.75rem;
  top: 50%;
  line-height: 1;
  transform: translateY(-50%);
  color: #fff;
}

.-success .mini-toastr-notification__message:after {
  content: "\f00c";
}

.-error .mini-toastr-notification__message:after {
  content: "\f00d";
}

.-warn .mini-toastr-notification__message:after {
  content: "\f071";
}

@keyframes fade-toast {
  0% {
    transform: translateY(-3px);
  }

  50% {
    transform: translateY(-1px);
  }

  100% {
    transform: translateY(0);
  }
}

@media (max-width: 1200px) {
  .row.search-panel > div {
    margin-bottom: .65rem;;
  }
}

/*----------------loading-tv------------------*/
.pop-up-background,
.pop-up-background-all-page {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  position: fixed;
  touch-action: none;
  background-color: rgba(0, 0, 0, 0.5);
  -webkit-tap-highlight-color: transparent;
}

.pop-up-background-all-page ~ .loading-tv {
  background: white;
}

.loading-wrapper {
  position: absolute;
  background-color: rgba(255, 255, 255, 0.4);
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.loading-tv {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  padding: 12px;
  border-radius: .25rem;
  background: rgba(136, 136, 136, .5);
  /* background: #e6e6e6; */
  background: linear-gradient(135deg, #fec899, #e6e6e6);
  box-sizing: content-box !important;
  z-index: 1000;
  position: absolute;
}

.loading-tv .loading-content {
  position: relative;
  display: block;
  height: 20px;
  width: 20px;
}

.loading-tv .l {
  position: absolute;
  width: 33.3%;
  height: 33.3%;
  background-color: var(--primary-thin-legacy-theme);
  animation: loading-l 1.5s infinite ease-in-out;
}

.loading-tv .l.l1 {
  animation-delay: .1s;
}

.loading-tv .l.l2 {
  animation-delay: .2s;
}

.loading-tv .l.l4 {
  animation-delay: .2s;
}

.loading-tv .l.l3 {
  animation-delay: .3s;
}

.loading-tv .l.l5 {
  animation-delay: .3s;
}

.loading-tv .l.l7 {
  animation-delay: .3s;
}

.loading-tv .l.l6 {
  animation-delay: .4s;
}

.loading-tv .l.l8 {
  animation-delay: .4s;
}

.loading-tv .l.l9 {
  animation-delay: .5s;
}

.loading-tv .l1,
.loading-tv .l2,
.loading-tv .l3 {
  top: 0;
}

.loading-tv .l4,
.loading-tv .l5,
.loading-tv .l6 {
  top: 33.3%;
}

.loading-tv .l7,
.loading-tv .l8,
.loading-tv .l9 {
  top: 66.6%;
}

.loading-tv .l1,
.loading-tv .l4,
.loading-tv .l7 {
  left: 0;
}

.loading-tv .l2,
.loading-tv .l5,
.loading-tv .l8 {
  left: 33.3%;
}

.loading-tv .l3,
.loading-tv .l6,
.loading-tv .l9 {
  left: 66.6%;
}

.element-loading {
  position: absolute;
  left: 1.2rem;
  top: 50%;
  transform: translateY(-50%);
}

.element-loading .spinner-border-sm {
  border-width: 0.15em;
  color: var(--primary-thin-legacy-theme);
}

.element-loading i {
  font-size: 1rem;
  color: var(--primary-legacy-theme);
}

@keyframes loading-l {
  0% {
    transform: scale(.95, .95)
  }

  50% {
    transform: scale(.05, .05)
  }

  100% {
    transform: scale(.95, .95)
  }
}

/*--------------- end loading-tv -----------------*/
.form-basic .form-group label {
  color: #3c5884 !important;
  font-weight: 600;
  font-size: .9em;
}

html,
.c-app,
.custom-scroll,
.table-responsive,
.select2-results ul {
  scrollbar-width: thin;
}

html::-webkit-scrollbar,
.content-notification::-webkit-scrollbar,
.custom-scroll::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar,
.select2-results ul::-webkit-scrollbar {
  width: 4px;
  height: 4px;
  background-color: rgba(127, 127, 127, .2) !important;
}

html::-webkit-scrollbar-thumb,
.content-notification::-webkit-scrollbar-thumb,
.custom-scroll::-webkit-scrollbar-thumb {
  background-color: var(--primary-thin-legacy-theme);
}

.custom-scroll::-webkit-scrollbar-thumb,
.table-responsive::-webkit-scrollbar-thumb,
.select2-results ul::-webkit-scrollbar-thumb {
  background-color: rgba(127, 127, 127, .2) !important
}

.custom-scroll::-webkit-scrollbar-track,
.table-responsive::-webkit-scrollbar-track,
.select2-results ul::-webkit-scrollbar-track {
  --webkit-box-shadow: inset 0 0 6px rgba(127, 127, 127, .2);
  background-color: white !important
}

.c-header-nav-items .dropdown-menu {
  min-width: 12rem;
}

.c-header-nav-items .dropdown-menu,
.c-header-nav-items .dropdown-header {
  /* border-top-left-radius: 20px;
  border-top-right-radius: 20px; */
  border-radius: .5rem !important
}

.c-header-nav-items .dropdown-header {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: .75rem 1.25rem;
}

.c-header-nav-items .dropdown-menu {
  animation: fade-scale ease-out .1s;
  animation-fill-mode: forwards;
}

@keyframes fade-scale {
  0% {
    opacity: 0;
    /* transform: translate(0); */
    /*transform: scale(.1) translateY(-80.8px, 36px);*/
  }

  70% {
    opacity: .1;
  }

  100% {
    opacity: 1;
    /*transform: translate(-80.8px, 36px) scale(1);;*/
  }
}

/*--------------- valid input -----------------*/
.form-input-wrapper {
  position: relative;
}

.valid-error {
  line-height: 1.35;
  color: #dc2626;
  font-size: 12.5px;
  font-weight: 600;
  margin-top: 6px;
  animation: fade-down ease-out .2s;
  animation-fill-mode: forwards;
  opacity: 0;
}

textarea.form-control {
  height: auto !important;
}

.input-valid-error input,
.input-valid-error textarea,
.input-valid-error.form-control,
.input-valid-error input.form-control {
  border: 1px solid #ff7070 !important;
  border-color: #ff7070 !important;
  transition: border .3s;
}

.input-valid-error input:focus,
.input-valid-error textarea:focus {
  border-color: #ff7070 !important;
  box-shadow: 0 0 0 3px rgba(255, 112, 112, 0.15) !important;
}

@keyframes fade-down {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }

  70% {
    opacity: .5;
  }

  100% {
    opacity: 1;
  }
}

/*--------------- end valid input -----------------*/

/*
 * BaseInput / BaseTextArea / BaseSelect2 / BaseSelectLocation — giao diện thống nhất (trang CMS)
 * Scoped .c-main: không đè layout auth-page (đã có rule riêng).
 */
:root {
  --cms-field-radius: 10px;
  --cms-field-h: 42px;
  --cms-field-border: #e2e8f0;
  --cms-field-border-focus: rgba(37, 99, 235, 0.55);
  --cms-field-ring: 0 0 0 3px rgba(37, 99, 235, 0.12);
  --cms-field-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  --cms-field-text: #0f172a;
  --cms-field-placeholder: #94a3b8;
}

/* Nhãn: BaseInput/BaseTextArea + select (tránh form-check) */
.c-app .c-body .c-main .form-input-wrapper label.col-form-label,
.c-app .c-body .c-main .form-input-wrapper .col-form-label,
.c-app .c-body .c-main .form-group:not(.form-check):not(.custom-control) > label:first-of-type:not(.form-check-label):not(.custom-control-label) {
  font-weight: 700 !important;
  font-size: 13.5px !important;
  color: #334155 !important;
  margin-bottom: 6px !important;
  letter-spacing: 0.01em;
}

/* BaseInput: input một dòng */
.c-app .c-body .c-main .form-input-wrapper input.form-control {
  height: var(--cms-field-h) !important;
  min-height: var(--cms-field-h) !important;
  padding: 0 14px !important;
  border-radius: var(--cms-field-radius) !important;
  box-shadow: var(--cms-field-shadow) !important;
  background: #fff !important;
  color: var(--cms-field-text) !important;
  font-size: 0.9375rem !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.c-app .c-body .c-main .form-input-wrapper input.form-control::placeholder {
  color: var(--cms-field-placeholder);
}

.c-app .c-body .c-main .form-input-wrapper input.form-control:hover:not(:disabled):not([readonly]) {
  border-color: #cbd5e1;
}

.c-app .c-body .c-main .form-input-wrapper input.form-control:focus {
  border-color: var(--cms-field-border-focus) !important;
  box-shadow: var(--cms-field-ring) !important;
  outline: none !important;
}

/* BaseTextArea */
.c-app .c-body .c-main .form-input-wrapper textarea.form-control {
  min-height: 108px !important;
  padding: 12px 14px !important;
  line-height: 1.5 !important;
  border-radius: var(--cms-field-radius) !important;
  border: 1px solid var(--cms-field-border) !important;
  box-shadow: var(--cms-field-shadow) !important;
  background: #fff !important;
  color: var(--cms-field-text) !important;
  font-size: 0.9375rem !important;
  resize: vertical !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.c-app .c-body .c-main .form-input-wrapper textarea.form-control:hover:not(:disabled):not([readonly]) {
  border-color: #cbd5e1 !important;
}

.c-app .c-body .c-main .form-input-wrapper textarea.form-control:focus {
  border-color: var(--cms-field-border-focus) !important;
  box-shadow: var(--cms-field-ring) !important;
  outline: none !important;
}

.c-app .c-body .c-main .form-input-wrapper.input-valid-error input.form-control,
.c-app .c-body .c-main .form-input-wrapper .form-control.input-valid-error,
.c-app .c-body .c-main .form-input-wrapper.input-valid-error textarea.form-control {
  border-color: rgba(220, 38, 38, 0.65) !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1) !important;
}

/* BaseSelect2 */
.c-app .c-body .c-main .group-select {
  position: relative;
}

.c-app .c-body .c-main .group-select .select2-container {
  width: 100% !important;
}

.c-app .c-body .c-main .group-select .select2-container--default .select2-selection--single {
  height: var(--cms-field-h) !important;
  box-sizing: border-box !important;
  border-radius: var(--cms-field-radius) !important;
  border: 1px solid var(--cms-field-border) !important;
  box-shadow: var(--cms-field-shadow) !important;
  background: #fff !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.c-app .c-body .c-main .group-select .select2-container--default.select2-container--open .select2-selection--single,
.c-app .c-body .c-main .group-select .select2-container--default .select2-selection--single:hover {
  border-color: #cbd5e1 !important;
}

.c-app .c-body .c-main .group-select .select2-container--default.select2-container--focus .select2-selection--single {
  border-color: var(--cms-field-border-focus) !important;
  box-shadow: var(--cms-field-ring) !important;
}

.c-app .c-body .c-main .group-select .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: calc(var(--cms-field-h) - 2px) !important;
  padding-left: 14px !important;
  padding-right: 36px !important;
  color: var(--cms-field-text) !important;
  font-size: 0.9375rem !important;
}

.c-app .c-body .c-main .group-select .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100% !important;
  top: 0 !important;
  right: 10px !important;
  width: 20px !important;
}

.c-app .c-body .c-main .group-select .select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: #64748b transparent transparent transparent !important;
  border-width: 5px 4px 0 4px !important;
  margin-top: -2px !important;
}

.c-app .c-body .c-main .group-select.input-valid-error .select2-container--default .select2-selection--single {
  border-color: rgba(220, 38, 38, 0.65) !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1) !important;
}

.c-app .c-body .c-main .select2-container--default .select2-dropdown {
  border: 1px solid var(--cms-field-border) !important;
  border-radius: var(--cms-field-radius) !important;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.1) !important;
  overflow: hidden;
}

.c-app .c-body .c-main .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: rgba(37, 99, 235, 0.12) !important;
  color: #1e3a8a !important;
}

/* Datepicker (dải filter) — đồng nhất cao/padding/bo với input & select2 */
.c-app .c-body .c-main .datepicker {
  height: var(--cms-field-h) !important;
  min-height: var(--cms-field-h) !important;
  max-height: var(--cms-field-h) !important;
  align-items: center !important;
}

.c-app .c-body .c-main .datepicker input {
  height: var(--cms-field-h) !important;
  min-height: var(--cms-field-h) !important;
  padding: 0 14px 0 2.5rem !important;
  border-radius: var(--cms-field-radius) !important;
  border: 1px solid var(--cms-field-border) !important;
  box-shadow: var(--cms-field-shadow) !important;
  background: #fff !important;
  font-size: 0.9375rem !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  color: var(--cms-field-text) !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.c-app .c-body .c-main .datepicker input:hover:not(:disabled) {
  border-color: #cbd5e1 !important;
}

.c-app .c-body .c-main .datepicker input:focus {
  border-color: var(--cms-field-border-focus) !important;
  box-shadow: var(--cms-field-ring) !important;
  outline: none !important;
}

.c-app .c-body .c-main .datepicker:after {
  left: 14px !important;
  color: #64748b !important;
  font-size: 0.95rem !important;
}

/* BaseSelectLocation (vue-treeselect multi): KHÔNG khóa height = --cms-field-h — tag + "n khác" + ô tìm
   cần cao hơn; value-container min-height cũ tạo ô trống; input-container max-width:100% (mặc định lib)
   trên dòng mới = full width = hàng caret rỗng.
   BaseModal teleport ra body: nội dung KHÔNG nằm dưới .c-app .c-body .c-main — thêm .base-modal-portal .group-select. */
.c-app .c-body .c-main .group-select .vue-treeselect__control,
.base-modal-portal .group-select .vue-treeselect__control {
  min-height: var(--cms-field-h) !important;
  height: auto !important;
  border-radius: var(--cms-field-radius) !important;
  border: 1px solid var(--cms-field-border) !important;
  box-shadow: var(--cms-field-shadow) !important;
  background: #fff !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  padding: 4px 2px !important;
  box-sizing: border-box !important;
}

.c-app .c-body .c-main .group-select .vue-treeselect:not(.vue-treeselect--disabled):hover .vue-treeselect__control,
.base-modal-portal .group-select .vue-treeselect:not(.vue-treeselect--disabled):hover .vue-treeselect__control {
  border-color: #cbd5e1 !important;
}

.c-app .c-body .c-main .group-select .vue-treeselect.vue-treeselect--focused:not(.vue-treeselect--open) .vue-treeselect__control,
.c-app .c-body .c-main .group-select .vue-treeselect.vue-treeselect--open .vue-treeselect__control,
.base-modal-portal .group-select .vue-treeselect.vue-treeselect--focused:not(.vue-treeselect--open) .vue-treeselect__control,
.base-modal-portal .group-select .vue-treeselect.vue-treeselect--open .vue-treeselect__control {
  border-color: var(--cms-field-border-focus) !important;
  box-shadow: var(--cms-field-ring) !important;
}

.c-app .c-body .c-main .group-select .vue-treeselect__value-container,
.base-modal-portal .group-select .vue-treeselect__value-container {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 8px 0 10px !important;
  box-sizing: border-box !important;
}

.c-app .c-body .c-main .group-select .vue-treeselect__x-container,
.base-modal-portal .group-select .vue-treeselect__x-container {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: center !important;
}

.c-app .c-body .c-main .group-select .vue-treeselect__input-container,
.base-modal-portal .group-select .vue-treeselect__input-container {
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1.35 !important;
  display: inline-flex !important;
  align-items: center !important;
  align-self: center !important;
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  flex-basis: auto !important;
  width: fit-content !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

.c-app .c-body .c-main .group-select .vue-treeselect__input,
.base-modal-portal .group-select .vue-treeselect__input {
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
  line-height: 1.35 !important;
  font-size: 0.9375rem !important;
  color: var(--cms-field-text) !important;
  max-width: none !important;
}

.c-app .c-body .c-main .group-select .vue-treeselect__multi-value,
.base-modal-portal .group-select .vue-treeselect__multi-value {
  margin: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  /* wrap: không scroll ngang; input-container có flex-grow:0 + width:fit-content để hàng 2 không full width */
  flex-wrap: wrap !important;
  align-items: center !important;
  align-content: center !important;
  gap: 4px 6px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

.c-app .c-body .c-main .group-select .vue-treeselect--searchable.vue-treeselect--multi.vue-treeselect--has-value .vue-treeselect__input-container,
.base-modal-portal .group-select .vue-treeselect--searchable.vue-treeselect--multi.vue-treeselect--has-value .vue-treeselect__input-container {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 4px !important;
}

.c-app .c-body .c-main .group-select .vue-treeselect__multi-value-item-container,
.base-modal-portal .group-select .vue-treeselect__multi-value-item-container {
  padding-top: 2px !important;
  padding-bottom: 2px !important;
  vertical-align: middle !important;
  flex-shrink: 0 !important;
}

.c-app .c-body .c-main .group-select .vue-treeselect__limit-tip,
.base-modal-portal .group-select .vue-treeselect__limit-tip {
  padding-top: 2px !important;
  padding-bottom: 2px !important;
  vertical-align: middle !important;
  flex-shrink: 0 !important;
}

.c-app .c-body .c-main .group-select .vue-treeselect__limit-tip-text,
.base-modal-portal .group-select .vue-treeselect__limit-tip-text {
  margin: 0 !important;
  display: inline-block !important;
  line-height: 1.35 !important;
}

.c-app .c-body .c-main .group-select .vue-treeselect__multi-value-item,
.base-modal-portal .group-select .vue-treeselect__multi-value-item {
  margin: 0 !important;
  padding: 3px 1px 3px 6px !important;
  border-radius: 6px !important;
  background: rgba(37, 99, 235, 0.08) !important;
  border: 1px solid rgba(37, 99, 235, 0.14) !important;
  font-size: 0.8125rem !important;
  line-height: 1.3 !important;
}

.c-app .c-body .c-main .group-select .vue-treeselect__multi-value-label,
.base-modal-portal .group-select .vue-treeselect__multi-value-label {
  color: #1e40af !important;
  font-weight: 700 !important;
  padding: 0 4px 0 0 !important;
  font-size: inherit !important;
}

.c-app .c-body .c-main .group-select .vue-treeselect__value-remove,
.base-modal-portal .group-select .vue-treeselect__value-remove {
  color: #2563eb !important;
  opacity: 0.9;
  padding: 0 5px 0 2px !important;
  min-width: 1.25rem !important;
}

.c-app .c-body .c-main .group-select .vue-treeselect__value-remove > svg,
.base-modal-portal .group-select .vue-treeselect__value-remove > svg {
  width: 8px !important;
  height: 8px !important;
}

.c-app .c-body .c-main .group-select .vue-treeselect__placeholder,
.base-modal-portal .group-select .vue-treeselect__placeholder {
  position: static !important;
  transform: none !important;
  top: auto !important;
  left: auto !important;
  line-height: 1.35 !important;
  margin: 0 !important;
  padding: 0 4px 0 0 !important;
  font-size: 0.9375rem !important;
  color: var(--cms-field-placeholder) !important;
}

.c-app .c-body .c-main .group-select .vue-treeselect__single-value,
.base-modal-portal .group-select .vue-treeselect__single-value {
  line-height: 1.35 !important;
  font-size: 0.9375rem !important;
  color: var(--cms-field-text) !important;
  padding: 0 4px !important;
}

.c-app .c-body .c-main .group-select .vue-treeselect__control-arrow-container,
.base-modal-portal .group-select .vue-treeselect__control-arrow-container {
  align-self: center !important;
  padding-right: 6px !important;
}

.c-app .c-body .c-main .group-select.input-valid-error .vue-treeselect__control,
.base-modal-portal .group-select.input-valid-error .vue-treeselect__control {
  border-color: rgba(220, 38, 38, 0.65) !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1) !important;
}

.c-app .c-body .c-main .group-select .vue-treeselect__menu,
.base-modal-portal .group-select .vue-treeselect__menu {
  border-radius: var(--cms-field-radius) !important;
  border: 1px solid var(--cms-field-border) !important;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.1) !important;
}

.c-app .c-body .c-main .group-select .vue-treeselect__option--highlight,
.base-modal-portal .group-select .vue-treeselect__option--highlight {
  background: rgba(37, 99, 235, 0.1) !important;
  color: #1e40af !important;
}

.c-app .c-body .c-main .group-select .vue-treeselect__option--selected,
.base-modal-portal .group-select .vue-treeselect__option--selected {
  background: rgba(37, 99, 235, 0.14) !important;
  color: #1e3a8a !important;
  font-weight: 700 !important;
}

.c-app .c-body .c-main .group-select .vue-treeselect__option:hover,
.base-modal-portal .group-select .vue-treeselect__option:hover {
  background: rgba(37, 99, 235, 0.08) !important;
}

.c-app .c-body .c-main .group-select .vue-treeselect__option--selected .vue-treeselect__option-checkbox,
.base-modal-portal .group-select .vue-treeselect__option--selected .vue-treeselect__option-checkbox {
  background-color: rgba(37, 99, 235, 0.12) !important;
  border-color: rgba(37, 99, 235, 0.35) !important;
}

/* Khoảng cách lỗi dưới select */
.c-app .c-body .c-main .group-select .valid-error,
.base-modal-portal .group-select .valid-error {
  margin-top: 6px;
}

/*--------------- global form login register -----------------*/
.form-fade-in-top,
.form-fade-in-bottom {
  animation-fill-mode: forwards;
}

.form-fade-in-top {
  animation: fade-in-top ease-out .3s;
}

.form-fade-in-bottom {
  animation: fade-in-bottom ease-out .3s;
}

@keyframes fade-in-top {
  0% {
    opacity: 0;
    transform: translateY(-50px);
  }

  50% {
    opacity: .5;
    transform: translateY(-14px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in-bottom {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }

  50% {
    opacity: .5;
    transform: translateY(14px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/*--------------- end global form login register -----------------*/

.modal.fade .modal-dialog {
  transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out !important;
}


/* ------ Custom file input ------ */
.custom-file.input-valid-error .custom-file-label {
  border: 1px solid #ff7070 !important;
  transition: border .3s;
  border-radius: .4rem !important;
}

.custom-file-label {
  border-color: #00000012 !important;
  height: 36px !important;
  line-height: 1.8 !important;
  color: #4f5d73 !important;
  font-weight: unset !important;
}

.custom-file-label::after {
  height: unset !important;
  line-height: 1.8 !important;
  content: "Chọn tệp" !important;
}

.custom-control.custom-checkbox.input-valid-error label {
  color: #ff7070 !important;
}

.custom-control.custom-checkbox.input-valid-error label::after {
  border: 1px solid #ff7070 !important;
  transition: border .3s;
  border-radius: .4rem !important;
}

.c-switch[class*="-3d"] .c-switch-slider {
  height: 18px !important;
  width: 40px !important;
}

.c-switch[class*="-3d"] .c-switch-slider::before {
  height: 17px !important;
  width: 17px !important;
  top: -1px !important;
}

.c-switch {
  height: unset !important;
}

.audio-css {
  height: 40px;
}

.group-audio {
  width: 10% !important;
}

.required {
  color: red;
}

.view-file {
  text-decoration: none;
  background-color: transparent;
  color: #321fdb;
  cursor: pointer;
}

.view-file:hover {
  text-decoration: underline;
}

.description {
  white-space: nowrap;
  width: 150px;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

.custom-control-input {
  /*opacity: 1 !important;*/
  z-index: 1 !important;
}

.override-custom {
  /* opacity: 1 !important; */
  z-index: 10 !important;
}


.scroll-left {
  overflow: hidden;
  position: relative;
}

.marquee {
  /*display: inline-block;*/
  display: table;
  white-space: nowrap;
  padding-left: 101%;
  margin: unset !important;
}

@keyframes scrollLeft {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-100%)
  }
}

/* Vue-Multiselect (Add.vue địa bàn) — đồng bộ field CMS */
.c-app .c-body .c-main .multiselect {
  min-height: var(--cms-field-h) !important;
  height: auto !important;
  font-size: 0.9375rem;
}

.c-app .c-body .c-main .multiselect .multiselect__tags {
  min-height: var(--cms-field-h) !important;
  /* Padding dọc; gap giữa các tag do .multiselect__tags-wrap (inline không hưởng gap của flex cha) */
  height: auto !important;
  padding: 8px 44px 8px 12px !important;
  border-radius: var(--cms-field-radius) !important;
  border: 1px solid var(--cms-field-border) !important;
  box-shadow: var(--cms-field-shadow) !important;
  background: #fff !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  align-content: flex-start !important;
  /* gap: 8px !important; */
  box-sizing: border-box !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
  min-width: 0 !important;
}

/* Tag nằm trong wrap display:inline mặc định — flex+gap để tách hàng/cột rõ ràng */
.c-app .c-body .c-main .multiselect .multiselect__tags-wrap {
  display: inline-flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px 10px !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

.c-app .c-body .c-main .multiselect:hover .multiselect__tags {
  border-color: #cbd5e1 !important;
}

.c-app .c-body .c-main .multiselect.multiselect--active .multiselect__tags,
.c-app .c-body .c-main .multiselect:focus-within .multiselect__tags {
  border-color: var(--cms-field-border-focus) !important;
  box-shadow: var(--cms-field-ring) !important;
}

.c-app .c-body .c-main .multiselect__placeholder {
  margin: 0 !important;
  padding: 0 !important;
  color: var(--cms-field-placeholder) !important;
  line-height: 1.35 !important;
}

.c-app .c-body .c-main .multiselect__input,
.c-app .c-body .c-main .multiselect__single {
  margin: 0 !important;
  padding: 0 !important;
  /* line-height gọn: tránh hàng ô tìm quá cao khi mở multiselect (nhiều tag) */
  line-height: 1.25 !important;
  min-height: 0 !important;
  font-size: 14px !important;
  color: var(--cms-field-text) !important;
  background: transparent !important;
}

.c-app .c-body .c-main .multiselect.multiselect--active .multiselect__input,
.c-app .c-body .c-main .multiselect:focus-within .multiselect__input {
  line-height: 1.25 !important;
  padding-top: 2px !important;
  padding-bottom: 2px !important;
}

.c-app .c-body .c-main .multiselect__input::placeholder {
  color: var(--cms-field-placeholder) !important;
}

.c-app .c-body .c-main .multiselect__tag {
  margin: 0 !important;
  border-radius: 8px !important;
  /* chừa chỗ cho nút remove (x) bên phải */
  padding: 4px 28px 4px 10px !important;
  background: rgba(37, 99, 235, 0.08) !important;
  border: 1px solid rgba(37, 99, 235, 0.14) !important;
  color: #1e40af !important;
  font-weight: 700 !important;
  position: relative !important;
  line-height: 1.5;
  display: inline-flex !important;
  align-items: center !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.c-app .c-body .c-main .multiselect__tag-icon {
  position: absolute !important;
  width: 22px !important;
  height: 100% !important;
  right: 6px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.c-app .c-body .c-main .multiselect__tag-icon:after {
  line-height: 1 !important;
}

.c-app .c-body .c-main .multiselect__tag-icon:after {
  color: #2563eb !important;
}

.c-app .c-body .c-main .multiselect__select {
  top: 1px !important;
  bottom: 1px !important;
  height: auto !important;
  min-height: 0 !important;
  width: 34px !important;
}

.c-app .c-body .c-main .multiselect.multiselect--active .multiselect__select {
  transform: rotate(180deg) !important;
}

.c-app .c-body .c-main .multiselect__select:before {
  border-color: #64748b transparent transparent transparent !important;
  border-width: 5px 4px 0 4px !important;
}

.c-app .c-body .c-main .multiselect__content-wrapper {
  border-radius: var(--cms-field-radius) !important;
  border: 1px solid var(--cms-field-border) !important;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.1) !important;
  /* Giữ cuộn dọc như vue-multiselect mặc định; overflow:hidden đã làm mất scrollbar */
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* Cột action bên phải: "Chọn / Đã chọn / Bỏ chọn" cùng width */
.c-app .c-body .c-main .multiselect__option {
  position: relative;
  padding-right: 96px !important;
}

.c-app .c-body .c-main .multiselect__option:after {
  position: absolute;
  top: 0;
  right: 0;
  width: 92px;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: #1e40af;
  background: rgba(37, 99, 235, 0.08);
  border-left: 1px solid rgba(148, 163, 184, 0.25);
}

.c-app .c-body .c-main .multiselect__option--selected:after {
  background: rgba(148, 163, 184, 0.18);
  color: #475569;
}

.c-app .c-body .c-main .multiselect__option--selected.multiselect__option--highlight:after {
  /* Bỏ chọn */
  background: rgba(220, 38, 38, 0.12);
  color: #991b1b;
  border-left-color: rgba(220, 38, 38, 0.18);
}

.c-app .c-body .c-main .multiselect__option--highlight {
  background: rgba(37, 99, 235, 0.1) !important;
  color: #1e40af !important;
}

.c-app .c-body .c-main .multiselect__option--highlight:after {
  /* Chọn */
  background: rgba(22, 163, 74, 0.12);
  color: #166534;
  border-left-color: rgba(22, 163, 74, 0.18);
}

.c-app .c-body .c-main .multiselect__option--selected {
  background: rgba(37, 99, 235, 0.12) !important;
  color: #1e3a8a !important;
  font-weight: 700;
}

.c-app .c-body .c-main .multiselect.input-error .multiselect__tags {
  border-color: rgba(220, 38, 38, 0.65) !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1) !important;
}

.vc-date {
  display: none !important;
}

table tr.active {
  background-color: rgba(0, 0, 21, 0.075);
}

.fixed-notification {
  /* color: white; */
  width: 100%;
  /* padding: 5px; */
  display: inline-flex;
  /* font-weight: 600; */
  z-index: 1040;
}

.fixed-notification marquee {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
}

.fixed-notification:hover marquee {
  animation-play-state: paused;
}


.yoyoo-ddr.focus {
  order: unset !important;
  outline: 3px dashed #607d8b !important;
}

.yoyoo-ddr.active {
  box-sizing: border-box;
  /* border: 2px dashed #607d8b !important; */
  border: unset !important;
  outline: 3px dashed #607d8b !important;
  /* box-shadow: 0 0 0 2px #607d8b!important; */
}


/* .table-thumbnail */
table td {
  align-content: center;
}

.content-container {
  display: flex;
  align-items: center;
}

.image-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 100px;
  width: 100px;
  height: 60px;
  background-color: #ffffff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.200);
  margin-right: 20px;
}

.image {
  width: auto;
  height: 100%;
  max-width: 100%;
  /* object-fit: contain; */
}

.text-container {
  cursor: pointer;
  font-size: 14px;
  color: #333;
  max-width: 400px;
  font-weight: 500;
}


/* Font Google  */
@font-face {
  font-family: 'Dancing Script';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/dancing-1.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
  font-family: 'Dancing Script';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/dancing-2.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Dancing Script';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/dancing-3.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* telugu */
@font-face {
  font-family: 'Lakki Reddy';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/LakkiReddy-1.woff2') format('woff2');
  unicode-range: U+0951-0952, U+0964-0965, U+0C00-0C7F, U+1CDA, U+1CF2, U+200C-200D, U+25CC;
}

/* latin */
@font-face {
  font-family: 'Lakki Reddy';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/LakkiReddy-2.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic-ext */
@font-face {
  font-family: 'Lobster';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/Lobster-1.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
  font-family: 'Lobster';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/Lobster-2.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* vietnamese */
@font-face {
  font-family: 'Lobster';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/Lobster-3.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
  font-family: 'Lobster';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/Lobster-4.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Lobster';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/Lobster-5.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin */
@font-face {
  font-family: 'Lobster Two';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/Lobster-6.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Parisienne';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/Parisienne-1.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Parisienne';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/Parisienne-2.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin */
@font-face {
  font-family: 'Tangerine';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/Tangerine.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'icomoon';
  src: url('/static/fonts/icomoon.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* ===== CoreUI Button Gradient Theme ===== */

.btn.btn-primary[disabled] {
  cursor: no-drop !important;
  box-shadow: unset !important;
}

.btn-primary, .btn-secondary {
  transition: all ease-out .3s;
  white-space: nowrap;
}

.btn-primary:hover {
  box-shadow: 2px 5px 10px rgba(51, 150, 255, 0.66) !important;
}

.btn-primary:active, .btn-secondary:active {
  transform: scale(.97);
}

.btn-primary:active {
  box-shadow: 2px 3px 7px rgba(51, 150, 255, 0.66) !important;
  transform: scale(.96);
}

.btn-secondary:hover {
  box-shadow: 2px 5px 10px rgba(139, 153, 168, 0.66) !important;
}

.btn-primary:active {
  box-shadow: 2px 3px 7px rgba(139, 153, 168, 0.66) !important;
  transform: scale(.96);
}

.btn-primary {
  background: linear-gradient(135deg, #6e50ff 0%, #506bff 35%, var(--primary-legacy-theme, #0b98ff) 70%, #0093ff 100%) !important;
  border-color: transparent !important;
  color: #fff !important;
  -webkit-box-shadow: 0 5px 1px 0 rgba(60, 75, 100, .14), 0 2px 1px -1px rgba(60, 75, 100, .12), 0 1px 3px 0 rgba(60, 75, 100, .20) !important;
  box-shadow: 0 0px 5px 0 rgba(60, 75, 100, .14), 0 2px 1px -1px rgba(60, 75, 100, .12), 0 1px 3px 0 rgba(60, 75, 100, .20) !important;
}

.btn-secondary {
  background: linear-gradient(135deg, #f8fafc 0%, #e5e7eb 40%, #cbd5e1 100%) !important;
  border-color: rgba(15, 23, 42, 0.08) !important;
  color: #0f172a !important;
}

.btn-success {
  background: linear-gradient(135deg, #15803d 0%, #22c55e 55%, #4ade80 100%) !important;
  border-color: transparent !important;
  color: #fff !important;
}

.btn-info {
  background: linear-gradient(135deg, #0891b2 0%, #06b6d4 55%, #0ea5e9 100%) !important;
  border-color: transparent !important;
  color: #fff !important;
}

.btn-warning {
  background: linear-gradient(135deg, #b45309 0%, #f59e0b 45%, #fb923c 100%) !important;
  border-color: transparent !important;
  color: #fff !important;
}

.btn-danger {
  background: linear-gradient(135deg, #ffe4e6 0%, #fecdd3 45%, #fb7185 100%) !important;
  border-color: transparent !important;
  color: #7f1d1d !important;
}

.btn.btn-danger,
.btn-error,
.btn.btn-error {
  background: linear-gradient(135deg, #ffe4e6 0%, #fecdd3 45%, #fb7185 100%) !important;
  border-color: transparent !important;
  color: #7f1d1d !important;
}

.modal-footer .btn-primary, .modal-footer .btn-secondary {
  padding: .55rem 0.75rem !important;
  min-width: 75px;
}

.btn-primary, .btn-secondary {
  border-radius: 0.5rem !important;
}

.btn {
  height: 40px;
  border-radius: 0.5rem !important;
}

/* ===== TTCS-inspired unified controls ===== */
/* Không gộp .multiselect__tags: multiselect nhiều tag cần height:auto, không khóa 40px */
.form-control,
.c-app .c-body .c-main .group-select .select2-container--default .select2-selection--single,
.c-app .c-body .c-main .datepicker input {
  height: 40px !important;
  min-height: 40px !important;
  border-radius: 0.5rem !important;
}

.form-control:focus,
.c-app .c-body .c-main .group-select .select2-container--default.select2-container--focus .select2-selection--single,
.c-app .c-body .c-main .multiselect.multiselect--active .multiselect__tags {
  border-color: var(--primary-thin-legacy-theme) !important;
  box-shadow: 0 0 0 4px rgba(57, 162, 255, 0.16) !important;
}

.c-app .c-body .c-main .datepicker input:focus {
  border-color: var(--primary-thin-legacy-theme) !important;
  box-shadow: 0 0 0 4px rgba(57, 162, 255, 0.16) !important;
}

.c-app .c-body .c-main .group-select .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 40px !important;
  padding-left: 0.85rem !important;
}

.c-app .c-body .c-main .group-select .select2-container--default .select2-selection--single .select2-selection__arrow {
  top: 50% !important;
  right: 12px !important;
  transform: translateY(-50%) !important;
}

.c-app .c-body .c-main .select2-container--default .select2-dropdown {
  border-radius: 0.5rem !important;
  border: 1px solid rgba(15, 23, 42, 0.1) !important;
  box-shadow: 0 4px 5px 0 rgba(60, 75, 100, 0.14), 0 1px 10px 0 rgba(60, 75, 100, 0.12), 0 2px 4px -1px rgba(60, 75, 100, 0.2) !important;
  overflow: hidden !important;
}

.c-app .c-body .c-main .select2-results__option--highlighted[aria-selected] {
  background-color: rgba(11, 152, 255, 0.16) !important;
  color: #0b6fb4 !important;
}

.c-app .c-body .c-main .multiselect__placeholder,
.c-app .c-body .c-main .multiselect__input {
  line-height: 1.5 !important;
  padding-top: 0 !important;
}

.c-app .c-body .c-main .datepicker {
  height: 40px !important;
  min-height: 40px !important;
  border-radius: 0.5rem !important;
}

.c-app .c-body .c-main .datepicker:after {
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
}

/* Sidebar */
.c-sidebar.sidebar-theme-light {
  background: linear-gradient(180deg, #f1f5f9 0%, #eef2f7 100%) !important;
  border-right: 1px solid #e2e8f0 !important;
}

.c-sidebar.sidebar-theme-light .c-sidebar-nav-link,
.c-sidebar.sidebar-theme-light .c-sidebar-nav-dropdown-toggle {
  border-radius: 10px;
  color: #334155 !important;
}

.c-sidebar.sidebar-theme-light .c-sidebar-nav-link.c-active,
.c-sidebar.sidebar-theme-light .c-active.c-sidebar-nav-dropdown-toggle {
  background: linear-gradient(90deg, rgba(37, 99, 235, 0.12) 0%, rgba(37, 99, 235, 0.04) 100%) !important;
  box-shadow: inset 3px 0 0 #2563eb;
  color: #0f172a !important;
}

/* Breadcrumb */
.breadcrumb {
  margin: 0 !important;
  padding: 0.32rem 0.65rem !important;
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-left: 3px solid #39a2ff !important;
  border-radius: 8px !important;
  background: #f8fbff;
}

.breadcrumb-item + .breadcrumb-item::before {
  content: '\203A' !important;
  color: rgba(100, 116, 139, 0.62) !important;
}

/* Pagination */
.pagination {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 5px 7px !important;
  margin: 0 !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.95) 0%, rgba(241, 245, 249, 0.85) 100%) !important;
  border: 1px solid rgba(15, 23, 42, 0.06) !important;
}

.pagination .page-link {
  min-width: 1.85rem !important;
  height: 1.85rem !important;
  border-radius: 8px !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  color: #475569 !important;
  background: #fff !important;
}

.pagination .page-item.active .page-link {
  color: #fff !important;
  background: linear-gradient(145deg, var(--primary-legacy-theme) 0%, #0088e8 100%) !important;
  border-color: transparent !important;
}

/* ===== EXACT MAPPING FROM TTCS SOURCE (NO CUSTOM CHANGES) ===== */
.btn.btn-primary[disabled] {
  cursor: no-drop !important;
  box-shadow: unset !important;
}

.btn-primary, .btn-secondary {
  transition: all ease-out .3s;
  white-space: nowrap;
}

.btn-primary:hover {
  box-shadow: 2px 5px 10px rgba(51, 150, 255, 0.66) !important;
}

.btn-primary:active, .btn-secondary:active {
  transform: scale(.97);
}

.btn-primary:active {
  box-shadow: 2px 3px 7px rgba(51, 150, 255, 0.66) !important;
  transform: scale(.96);
}

.btn-secondary:hover {
  box-shadow: 2px 5px 10px rgba(139, 153, 168, 0.66) !important;
}

.btn-primary:active {
  box-shadow: 2px 3px 7px rgba(139, 153, 168, 0.66) !important;
  transform: scale(.96);
}

.btn-primary {
  background: linear-gradient(135deg, #6e50ff 0%, #506bff 35%, var(--primary-legacy-theme, #0b98ff) 70%, #0093ff 100%) !important;
  border-color: transparent !important;
  color: #fff !important;
  -webkit-box-shadow: 0 5px 1px 0 rgba(60, 75, 100, .14), 0 2px 1px -1px rgba(60, 75, 100, .12), 0 1px 3px 0 rgba(60, 75, 100, .20) !important;
  box-shadow: 0 0px 5px 0 rgba(60, 75, 100, .14), 0 2px 1px -1px rgba(60, 75, 100, .12), 0 1px 3px 0 rgba(60, 75, 100, .20) !important;
}

.btn-secondary {
  background: linear-gradient(135deg, #f8fafc 0%, #e5e7eb 40%, #cbd5e1 100%) !important;
  border-color: rgba(15, 23, 42, 0.08) !important;
  color: #0f172a !important;
}

.btn-success {
  background: linear-gradient(135deg, #15803d 0%, #22c55e 55%, #4ade80 100%) !important;
  border-color: transparent !important;
  color: #fff !important;
}

.btn-info {
  background: linear-gradient(135deg, #0891b2 0%, #06b6d4 55%, #0ea5e9 100%) !important;
  border-color: transparent !important;
  color: #fff !important;
}

.btn-warning {
  background: linear-gradient(135deg, #b45309 0%, #f59e0b 45%, #fb923c 100%) !important;
  border-color: transparent !important;
  color: #fff !important;
}

.btn-danger {
  background: linear-gradient(135deg, #ffe4e6 0%, #fecdd3 45%, #fb7185 100%) !important;
  border-color: transparent !important;
  color: #7f1d1d !important;
}

.btn.btn-danger,
.btn-error,
.btn.btn-error {
  background: linear-gradient(135deg, #ffe4e6 0%, #fecdd3 45%, #fb7185 100%) !important;
  border-color: transparent !important;
  color: #7f1d1d !important;
}

.btn-action-primary,
.btn-action-secondary,
.btn.btn-primary,
.btn.btn-secondary,
.btn.btn-success,
.btn.btn-info,
.btn.btn-warning,
.btn.btn-danger {
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 16px !important;
  border-radius: 12px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.form-control, .btn.dropdown-toggle, .datepicker input,
.select2-container--default .select2-selection--single,
.btn-action-primary, .select2-selection.select2-selection--single, .custom-file-input, .custom-file {
  height: calc(1.5em + 0.75rem + 3px) !important;
}

input.form-control {
  height: 40px !important;
  min-height: 40px !important;
  border-radius: 12px !important;
  line-height: 40px !important;
  padding: 0 1rem !important;
  box-sizing: border-box !important;
}

.form-control:focus {
  box-shadow: 0 0 0 4px rgba(57, 162, 255, 0.16) !important;
  border-color: var(--primary-thin-legacy-theme) !important;
}

.group-select .select2-container--default .select2-selection--single {
  border-color: rgba(15, 23, 42, 0.10) !important;
  box-shadow: none !important;
}

.group-select .select2-container--default.select2-container--open .select2-selection--single,
.group-select .select2-container--default .select2-selection--single[aria-expanded="true"] {
  border-color: var(--primary-thin-legacy-theme) !important;
  box-shadow: 0 0 0 4px rgba(57, 162, 255, 0.16) !important;
}

.group-select .select2-container,
.group-select .select2-container--default,
.select2-container--default {
  box-sizing: border-box;
}

.group-select .select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--single {
  width: 100% !important;
  box-sizing: border-box;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 40px !important;
  padding-left: 0.85rem !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  top: 50% !important;
  right: 12px !important;
  transform: translateY(-50%) !important;
}

.select2-dropdown {
  border: 1px solid rgba(15, 23, 42, 0.10) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  top: 3px;
  max-width: calc(100vw - 24px) !important;
  box-sizing: border-box !important;
}

.select2-results,
.select2-results__options {
  border-radius: 12px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

.select2-results__options {
  max-height: 280px !important;
}

.select2-dropdown, .vc-popover-content {
  -webkit-box-shadow: 0 4px 5px 0 rgba(60, 75, 100, .14), 0 1px 10px 0 rgba(60, 75, 100, .12), 0 2px 4px -1px rgba(60, 75, 100, .20);
  box-shadow: 0 4px 5px 0 rgba(60, 75, 100, .14), 0 1px 10px 0 rgba(60, 75, 100, .12), 0 2px 4px -1px rgba(60, 75, 100, .20);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: rgba(11, 152, 255, 0.16) !important;
  color: #0b6fb4 !important;
}

.select2-results__option {
  padding: 10px 14px !important;
  font-size: 0.875rem;
  white-space: normal !important;
  word-break: break-word;
}

.select2-results__option[aria-selected="true"] {
  background: rgba(11, 152, 255, 0.10) !important;
  color: #0b6fb4 !important;
}

.select2-results__option:hover {
  background: rgba(11, 152, 255, 0.12) !important;
}

.datepicker {
  position: relative;
  display: inline-flex;
  width: 100%;
  height: 40px !important;
  min-height: 40px !important;
  border-radius: 12px !important;
}

.datepicker input {
  padding-left: 2.25rem !important;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  width: 100%;
  border-radius: 12px !important;
}

.datepicker:after {
  font-family: FontAwesome;
  font-size: .95em;
  content: "\f073";
  padding-right: 0 !important;
  vertical-align: middle;
  font-weight: 900;
  position: absolute;
  left: 0.75rem;
  top: 50%;
  line-height: 1;
  transform: translateY(-50%);
  color: #717171;
}

.multiselect {
  min-height: 40px !important;
  border-radius: 12px !important;
  margin-top: 0 !important;
}

.multiselect .multiselect__tags {
  min-height: 40px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(15, 23, 42, 0.10) !important;
  box-shadow: none !important;
  /* padding: 0 12px !important; */
  margin: 0 !important;
  overflow: visible !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  align-content: center !important;
}

.multiselect__input {
  line-height: 40px !important;
  font-size: 14px !important;
  padding-top: 0 !important;
  height: auto !important;
  margin: 0 !important;
  align-self: center !important;
}

.multiselect__placeholder {
  padding: 0 !important;
  margin: 0 !important;
  line-height: 40px !important;
  display: flex !important;
  align-items: center !important;
  overflow: hidden !important;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-height: 16px;
}

.c-sidebar.sidebar-theme-light {
  --sidebar-bg-top: #f1f5f9;
  --sidebar-bg-bottom: #eef2f7;
  --sidebar-border: #e2e8f0;
  --sidebar-hover: rgba(37, 99, 235, 0.08);
  --sidebar-active-bg: linear-gradient(90deg, rgba(37, 99, 235, 0.12) 0%, rgba(37, 99, 235, 0.04) 100%);
  --sidebar-accent: #2563eb;
  --sidebar-text: #334155;
  --sidebar-text-strong: #0f172a;
  --sidebar-muted: #64748b;
}

.c-sidebar.sidebar-theme-light {
  isolation: isolate;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, var(--sidebar-bg-top) 0%, var(--sidebar-bg-bottom) 100%) !important;
  border-right: 1px solid var(--sidebar-border) !important;
  overflow: hidden;
}

.c-sidebar.sidebar-theme-light .c-sidebar-nav-link,
.c-sidebar.sidebar-theme-light .c-sidebar-nav-dropdown-toggle {
  color: var(--sidebar-text) !important;
  white-space: break-spaces;
  border-radius: 10px;
  margin: 3px 0;
  padding: 0.62rem 0.9rem !important;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.c-sidebar.sidebar-theme-light .c-sidebar-nav-link.c-active,
.c-sidebar.sidebar-theme-light .c-active.c-sidebar-nav-dropdown-toggle {
  background: var(--sidebar-active-bg) !important;
  color: var(--sidebar-text-strong) !important;
  box-shadow: inset 3px 0 0 var(--sidebar-accent);
  font-weight: 600;
}

.breadcrumb {
  margin: 0 !important;
  padding: .32rem .65rem !important;
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-left: 3px solid #39a2ff !important;
  border-radius: 8px !important;
  background: #f8fbff;
  box-shadow: none;
  display: inline-flex !important;
  align-items: center;
  flex-wrap: wrap;
}

.breadcrumb-item + .breadcrumb-item::before {
  content: '\203A' !important;
  color: rgba(100, 116, 139, 0.62) !important;
  padding: 0 .42rem !important;
  font-weight: 700;
}

.pagination {
  display: inline-flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 5px 7px !important;
  margin: 0 !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.95) 0%, rgba(241, 245, 249, 0.85) 100%) !important;
  border: 1px solid rgba(15, 23, 42, 0.06) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.06) !important;
}

.pagination .page-link {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 1.85rem !important;
  height: 1.85rem !important;
  padding: 0 0.35rem !important;
  margin: 0 !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  color: #475569 !important;
  background: #fff !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset !important;
}

.pagination .page-item.active .page-link {
  color: #fff !important;
  background: linear-gradient(145deg, var(--primary-legacy-theme) 0%, #0088e8 100%) !important;
  border-color: transparent !important;
  box-shadow: 0 2px 8px rgba(11, 152, 255, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.15) inset !important;
}

/* Breadcrumb separator fix: prevent mixed icon styles */
.breadcrumb-item + .breadcrumb-item::before {
  content: '\203A' !important;
  border: none !important;
  width: auto !important;
  height: auto !important;
  margin-right: 0.42rem !important;
  padding: 0 !important;
  transform: none !important;
  color: rgba(100, 116, 139, 0.62) !important;
  font-weight: 700 !important;
}

.breadcrumb-item + .breadcrumb-item::after {
  content: none !important;
  display: none !important;
}

/* Select2 exact-like mapping + dropdown scroll fix */
.c-app .c-body .c-main .group-select .select2-container--default .select2-selection--single {
  height: 40px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(15, 23, 42, 0.1) !important;
  box-shadow: none !important;
  background: #fff !important;
}

.c-app .c-body .c-main .group-select .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 40px !important;
  padding-left: 0.85rem !important;
  padding-right: 36px !important;
  text-align: left !important;
}

.c-app .c-body .c-main .group-select .select2-container--default .select2-selection--single .select2-selection__arrow {
  top: 50% !important;
  right: 12px !important;
  transform: translateY(-50%) !important;
}

.c-app .c-body .c-main .group-select .select2-container--default.select2-container--open .select2-selection--single,
.c-app .c-body .c-main .group-select .select2-container--default .select2-selection--single[aria-expanded="true"] {
  border-color: var(--primary-thin-legacy-theme) !important;
  box-shadow: 0 0 0 4px rgba(57, 162, 255, 0.16) !important;
}

.c-app .c-body .c-main .group-select .select2-container--open .select2-dropdown {
  border: 1px solid rgba(15, 23, 42, 0.1) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  margin-top: 4px !important;
  box-shadow: 0 4px 5px 0 rgba(60, 75, 100, 0.14), 0 1px 10px 0 rgba(60, 75, 100, 0.12), 0 2px 4px -1px rgba(60, 75, 100, 0.2) !important;
}

.c-app .c-body .c-main .group-select .select2-search--dropdown {
  padding: 8px !important;
}

.c-app .c-body .c-main .group-select .select2-search--dropdown .select2-search__field {
  height: 40px !important;
  min-height: 40px !important;
  line-height: 40px !important;
  padding: 0 12px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(15, 23, 42, 0.1) !important;
  box-shadow: none !important;
}

.c-app .c-body .c-main .group-select .select2-search--dropdown .select2-search__field:focus {
  border-color: var(--primary-thin-legacy-theme) !important;
}

.c-app .c-body .c-main .group-select .select2-results {
  overflow: hidden !important;
}

.c-app .c-body .c-main .group-select .select2-results__options {
  max-height: 280px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
}

/* Header BaseSelect2: same style as main components */
.c-header .group-select .select2-container,
.c-subheader .group-select .select2-container {
  width: 100% !important;
}

.c-header .group-select .select2-container--default .select2-selection--single,
.c-subheader .group-select .select2-container--default .select2-selection--single {
  height: 40px !important;
  min-height: 40px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(15, 23, 42, 0.1) !important;
  box-shadow: none !important;
  background: #fff !important;
}

.c-header .group-select .select2-container--default .select2-selection--single .select2-selection__rendered,
.c-subheader .group-select .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 40px !important;
  padding-left: 0.85rem !important;
  padding-right: 36px !important;
  color: #4f5d73 !important;
}

.c-header .group-select .select2-container--default .select2-selection--single .select2-selection__arrow,
.c-subheader .group-select .select2-container--default .select2-selection--single .select2-selection__arrow {
  top: 50% !important;
  right: 12px !important;
  transform: translateY(-50%) !important;
}

.c-header .group-select .select2-container--default.select2-container--open .select2-selection--single,
.c-subheader .group-select .select2-container--default.select2-container--open .select2-selection--single,
.c-header .group-select .select2-container--default .select2-selection--single[aria-expanded="true"],
.c-subheader .group-select .select2-container--default .select2-selection--single[aria-expanded="true"] {
  border-color: var(--primary-thin-legacy-theme) !important;
  box-shadow: 0 0 0 4px rgba(57, 162, 255, 0.16) !important;
}

.c-header .group-select .select2-search--dropdown,
.c-subheader .group-select .select2-search--dropdown {
  padding: 8px !important;
}

.c-header .group-select .select2-search--dropdown .select2-search__field,
.c-subheader .group-select .select2-search--dropdown .select2-search__field {
  height: 40px !important;
  min-height: 40px !important;
  line-height: 40px !important;
  padding: 0 12px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(15, 23, 42, 0.1) !important;
  box-shadow: none !important;
  background: #fff !important;
}

.c-header .group-select .select2-search--dropdown .select2-search__field:focus,
.c-subheader .group-select .select2-search--dropdown .select2-search__field:focus {
  border-color: var(--primary-thin-legacy-theme) !important;
  box-shadow: 0 0 0 4px rgba(57, 162, 255, 0.16) !important;
}

/* BaseSelect2 dropdown search input (global) */
.group-select .select2-search--dropdown {
  padding: 8px !important;
}

.group-select .select2-search--dropdown .select2-search__field {
  height: 40px !important;
  min-height: 40px !important;
  line-height: 40px !important;
  padding: 0 12px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(15, 23, 42, 0.1) !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08) !important;
  background: #fff !important;
  color: #4f5d73 !important;
}

.group-select .select2-search--dropdown .select2-search__field:focus {
  border-color: var(--primary-thin-legacy-theme) !important;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.1), 0 0 0 4px rgba(57, 162, 255, 0.16) !important;
}

.btn i {
  margin-top: 2px!important;
}

/* --------------------------------------------------------------------------
   vue-treeselect multi — màn KHÔNG bọc .group-select (vd. RoleAdd / form-group).
   Layout chính Địa bàn: block .c-app…group-select phía trên. Ở đây chỉ fallback +
   kích thước tag / menu.
   -------------------------------------------------------------------------- */

.vue-treeselect--multi .vue-treeselect__control {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  height: auto !important;
  min-height: 40px !important;
  padding: 4px 6px !important;
  box-sizing: border-box !important;
}

.vue-treeselect--multi .vue-treeselect__value-container {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
}

.vue-treeselect--multi .vue-treeselect__x-container,
.vue-treeselect--multi .vue-treeselect__control-arrow-container {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: center !important;
}

.vue-treeselect--has-value .vue-treeselect__multi-value {
  margin-bottom: 0 !important;
}

.vue-treeselect--multi .vue-treeselect__multi-value {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  align-content: center !important;
  gap: 4px 6px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

.vue-treeselect--multi .vue-treeselect__input-container {
  display: inline-flex !important;
  align-items: center !important;
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  flex-basis: auto !important;
  width: fit-content !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 4px !important;
}

.vue-treeselect--searchable.vue-treeselect--multi.vue-treeselect--has-value .vue-treeselect__input-container {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.vue-treeselect__multi-value-item-container {
  padding: 2px 4px 2px 0 !important;
  vertical-align: middle !important;
  flex-shrink: 0 !important;
}

.vue-treeselect__multi-value-item {
  font-size: 0.8125rem !important;
  padding: 3px 1px 3px 6px !important;
  border-radius: 5px !important;
  line-height: 1.3 !important;
}

.vue-treeselect__multi-value-label {
  padding: 0 4px 0 0 !important;
  white-space: nowrap !important;
  max-width: 14em !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: inherit !important;
}

.vue-treeselect__value-remove {
  padding: 0 5px 0 2px !important;
  min-width: 1.25rem !important;
}

.vue-treeselect__value-remove > svg {
  width: 8px !important;
  height: 8px !important;
}

.vue-treeselect__limit-tip {
  padding: 2px 4px 2px 0 !important;
  vertical-align: middle !important;
  flex-shrink: 0 !important;
}

.vue-treeselect__limit-tip-text {
  display: inline-block !important;
  margin: 0 !important;
  padding: 2px 6px !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  color: #9e9e9e !important;
  white-space: nowrap !important;
}

.vue-treeselect--multi .vue-treeselect__input {
  margin: 0 !important;
  padding: 2px 0 !important;
  font-size: 0.8125rem !important;
  line-height: 1.3 !important;
  max-width: none !important;
}

/* Dropdown: vừa phải (nhỏ hơn bản trước một chút, vẫn dễ đọc) */
.vue-treeselect__menu {
  line-height: 1.4 !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  font-size: 14px !important;
}

.vue-treeselect__menu .vue-treeselect__option {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

.vue-treeselect__menu .vue-treeselect__option--highlight {
  background: #e8f4fc !important;
}

.vue-treeselect__menu .vue-treeselect__label {
  font-size: 14px !important;
  line-height: 1.4 !important;
  padding-left: 6px !important;
}

.vue-treeselect__menu .vue-treeselect__count {
  font-size: 13px !important;
  margin-left: 6px !important;
  opacity: 0.72 !important;
}

.vue-treeselect__menu .vue-treeselect__checkbox-container {
  width: 26px !important;
  min-width: 26px !important;
}

.vue-treeselect__menu .vue-treeselect__checkbox {
  width: 15px !important;
  height: 15px !important;
  border-radius: 3px !important;
}

.vue-treeselect__menu .vue-treeselect__check-mark,
.vue-treeselect__menu .vue-treeselect__minus-mark {
  left: 2px !important;
  top: 2px !important;
}

.vue-treeselect__menu .vue-treeselect__option-arrow-container,
.vue-treeselect__menu .vue-treeselect__option-arrow-placeholder {
  width: 24px !important;
}

.vue-treeselect__menu .vue-treeselect__option-arrow {
  width: 10px !important;
  height: 10px !important;
}

.vue-treeselect__menu .vue-treeselect__tip {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

.vue-treeselect__menu .vue-treeselect__tip-text {
  font-size: 13px !important;
  line-height: 1.4 !important;
}

/* =============================================================================
   Modal truyền thông (dvm-modal-skin): light — card hiện đại, viền & bóng mềm
   ============================================================================= */
#liveStream .dvm .modal .modal-dialog .modal-content.dvm-modal-skin,
.c-app #liveStream .dvm .modal .modal-dialog .modal-content.dvm-modal-skin {
  background: linear-gradient(165deg, #ffffff 0%, #f8fafc 50%, #f1f5f9 100%) !important;
  border: 1px solid rgba(148, 163, 184, 0.35) !important;
  border-radius: 20px !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.9),
    0 4px 6px -1px rgba(15, 23, 42, 0.06),
    0 25px 50px -12px rgba(15, 23, 42, 0.15),
    0 0 80px -20px rgba(88, 101, 242, 0.12) !important;
  overflow: hidden !important;
}

#liveStream .dvm .modal .modal-dialog .modal-content.dvm-modal-skin > .modal-header,
.c-app #liveStream .dvm .modal .modal-dialog .modal-content.dvm-modal-skin > .modal-header {
  padding: 18px 24px !important;
  background: linear-gradient(180deg, #fbfcfe 0%, #ffffff 100%) !important;
  border-bottom: 1px solid rgba(226, 232, 240, 0.95) !important;
  color: #0f172a !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset !important;
}

#liveStream .dvm .modal .modal-dialog .modal-content.dvm-modal-skin > .modal-header .close,
.c-app #liveStream .dvm .modal .modal-dialog .modal-content.dvm-modal-skin > .modal-header .close {
  color: #64748b !important;
  text-shadow: none !important;
  opacity: 1 !important;
  border-radius: 10px !important;
  width: 40px !important;
  height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.18s ease, color 0.18s ease !important;
}

#liveStream .dvm .modal .modal-dialog .modal-content.dvm-modal-skin > .modal-header .close:hover,
.c-app #liveStream .dvm .modal .modal-dialog .modal-content.dvm-modal-skin > .modal-header .close:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}

#liveStream .dvm .modal .modal-dialog .modal-content.dvm-modal-skin > .modal-body,
.c-app #liveStream .dvm .modal .modal-dialog .modal-content.dvm-modal-skin > .modal-body {
  padding: 0 !important;
  background: transparent !important;
}

#liveStream .dvm .modal .modal-dialog .modal-content.dvm-modal-skin > .modal-footer,
.c-app #liveStream .dvm .modal .modal-dialog .modal-content.dvm-modal-skin > .modal-footer {
  padding: 16px 24px !important;
  background: linear-gradient(0deg, #f1f5f9 0%, #f8fafc 100%) !important;
  border-top: 1px solid #e2e8f0 !important;
  justify-content: stretch !important;
  box-shadow: 0 -4px 20px rgba(15, 23, 42, 0.04) !important;
}

#liveStream .dvm .modal .modal-dialog .modal-content.dvm-modal-skin .dvm__rail,
.c-app #liveStream .dvm .modal .modal-dialog .modal-content.dvm-modal-skin .dvm__rail {
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
  border-right: 1px solid #e2e8f0 !important;
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.85) !important;
}

#liveStream .dvm > .modal-backdrop,
#liveStream .dvm .modal.show ~ .modal-backdrop,
#liveStream .dvm .modal.d-block ~ .modal-backdrop,
.c-app #liveStream .dvm > .modal-backdrop,
.c-app #liveStream .dvm .modal.show ~ .modal-backdrop,
.c-app #liveStream .dvm .modal.d-block ~ .modal-backdrop {
  background-color: transparent !important;
  background:
    radial-gradient(ellipse 100% 80% at 50% 20%, rgba(255, 255, 255, 0.55) 0%, transparent 50%),
    linear-gradient(165deg, rgba(203, 213, 225, 0.45) 0%, rgba(148, 163, 184, 0.38) 100%) !important;
  backdrop-filter: blur(12px) saturate(1.04) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.04) !important;
}

#liveStream .dvm > .modal-backdrop.show,
#liveStream .dvm .modal.show ~ .modal-backdrop.show,
#liveStream .dvm .modal.d-block ~ .modal-backdrop.show,
.c-app #liveStream .dvm > .modal-backdrop.show,
.c-app #liveStream .dvm .modal.show ~ .modal-backdrop.show,
.c-app #liveStream .dvm .modal.d-block ~ .modal-backdrop.show {
  opacity: 1 !important;
}

#liveStream .dvm-modal-skin button i {
  font-size: 18px!important;
}