:root,
[data-bs-theme="light"] {
  --bg-color-selected: #1274ac; /* thay thế #ff6358 */
  --bg-color-hover: #116fa5; /* thay thế #f55f54 */
  --bg-color-active: #106697; /* thay thế #e0574d */
  --btn-color-hover: #0f6190; /* thay thế #d6534a */
  --item-selected-hover: #116b9e; /* thay thế #eb5b51 */
  --border-color: #dadfe5;
  --border-color-focus: #90b5e2;
  --bg-color-surface: inherit;
  --bg-color-toolbar: #fafafa;
  --bg-grid-content: #ffffff;
  --body-color: #424242;
  --grid-filter-hover: #ebebeb;
  --bg-color-content: #ffffff;
  --bg-color-primary: var(--bg-color-selected);
  --k-popup-bg-color: var(--bg-color-content);
  --k-grid-tr-hover: #ededed;
  --bg-k-list-item-hover: #ececec;
  --k-color-navbar: #fafafa;
  --k-bg-color-navbar: #0b3266;
}

[data-bs-theme="dark"] {
  --bg-color-surface: #182433;
  --bg-color-toolbar: #151f2c;
  --bg-grid-content: #182433;
  --body-color: #dce1e7;
  --grid-filter-hover: #182433;
  --bg-color-content: #182433;
  --bg-color-primary: #151f2c;
  --k-popup-bg-color: var(--bg-color-toolbar);
  --k-bg-color-navbar: var(--bg-color-content);
  --k-grid-tr-hover: rgba(0, 0, 0, 0.06);
  --bg-k-list-item-hover: var(--bg-color-content);
}

html {
  font-size: 62.5%;
}

.k-input-spinner .k-button-solid-base {
  background-color: var(--tblr-bg-surface-secondary);
  color: var(--tblr-body-color);
}

.k-button-solid-base:focus,
.k-button-solid-base.k-focus,
.k-input:focus-within,
.k-button-solid-primary:focus,
.k-button-solid-primary.k-focus,
.k-pager-numbers .k-link:focus,
.k-pager-numbers .k-link.k-state-focus {
  box-shadow: unset;
}

.k-button-solid-primary {
  border-color: var(--bg-color-selected);
  background-color: var(--bg-color-selected);
}

.k-button-solid-primary:hover,
.k-button-solid-primary.k-hover {
  border-color: var(--bg-color-hover);
  background-color: var(--bg-color-hover);
}

.k-button-solid-primary:active,
.k-button-solid-primary.k-active {
  border-color: var(--bg-color-active);
  background-color: var(--bg-color-active);
}

.k-button-solid-primary.k-selected {
  border-color: var(--bg-color-active);
  background-color: var(--bg-color-active);
}

.k-button-solid-base.k-selected {
  border-color: var(--bg-color-selected);
  background-color: var(--bg-color-selected);
}

.k-button-solid-primary:hover,
.k-button-solid-primary.k-hover {
  border-color: var(--bg-color-hover);
  background-color: var(--bg-color-hover);
}

.k-calendar .k-nav-today {
  color: var(--bg-color-selected);
}

.k-list-item.k-selected,
.k-selected.k-list-optionlabel {
  background-color: var(--bg-color-selected);
}

.k-list-item.k-selected:hover,
.k-selected.k-list-optionlabel:hover,
.k-list-item.k-selected.k-hover,
.k-selected.k-hover.k-list-optionlabel {
  background-color: var(--item-selected-hover);
}

.k-calendar {
  border-color: var(--tblr-border-color);
  color: var(--body-color);
  background-color: var(--k-popup-bg-color);
  border-width: 0px;
}

.k-calendar .k-calendar-view .k-today {
  color: var(--bg-color-selected);
}

.k-calendar .k-calendar-td.k-state-selected .k-link {
  background-color: var(--bg-color-selected);
}

.k-calendar .k-range-start .k-link,
.k-calendar .k-range-end .k-link {
  background-color: var(--bg-color-selected);
}

.k-time-header .k-time-now,
.k-time-selector-header .k-time-now {
  color: var(--bg-color-selected);
}

.k-time-list .k-item:hover {
  color: var(--bg-color-selected);
}

.k-calendar .k-calendar-td.k-state-selected:hover .k-link,
.k-calendar .k-calendar-td.k-state-selected.k-state-hover .k-link {
  background-color: var(--bg-color-hover);
}

.k-time-header .k-time-now:hover,
.k-time-selector-header .k-time-now:hover {
  color: var(--btn-color-hover);
}

.k-calendar .k-nav-today:hover,
.k-calendar .k-nav-today.k-state-hover,
.k-calendar .k-nav-today:focus,
.k-calendar .k-nav-today.k-state-focus {
  color: var(--btn-color-hover);
}

.k-timeselector {
  background-color: var(--k-popup-bg-color);
  color: var(--body-color);
}

.k-time-list::before,
.k-time-list::after {
  box-shadow: 0 0 3em 1.5em var(--k-popup-bg-color);
}

.k-time-list-wrapper .k-title {
  color: var(--body-color);
}

.k-time-highlight {
  border-color: var(--tblr-border-color);
  background-color: transparent;
  z-index: 2;
}

.btn-noborder-radius-left > button.k-rounded-md {
  background-color: var(--tblr-bg-surface-secondary);
  color: var(--tblr-body-color);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: 1px solid var(--tblr-border-color);
}

.k-input-spinner.k-spin-button {
  border-left: 1px solid var(--tblr-border-color);
}

/* Input */
.k-input {
  border-color: var(--tblr-border-color);
  background-color: var(--tblr-bg-forms);
  color: var(--tblr-body-color);
}

.k-input-md,
.k-picker-md {
  height: 27.5px;
  font-size: 13px;
}

.k-multiselect.k-input-md {
  min-height: 27.5px;
  height: unset;
  font-size: 13px;
}

.k-input-md .k-input-inner,
.k-picker-md .k-input-inner {
  padding: 2px 8px;
}

.k-input:hover,
.k-input.k-hover {
  border-color: var(--tblr-border-color);
}

.k-input:focus,
.k-input.k-focus,
.k-picker:focus,
.k-picker.k-focus,
.k-input:focus-within {
  box-shadow: none;
  border-color: var(--border-color-focus);
}

.k-input.k-invalid,
.k-input.ng-invalid.ng-touched,
.k-input.ng-invalid.ng-dirty {
  border-color: rgba(243, 23, 0, 0.5);
}

.k-list {
  border-color: var(--tblr-border-color);
  color: var(--body-color);
  background-color: var(--tblr-bg-forms);
}

.k-list-md,
.k-chip-md {
  font-size: 13px;
}

.k-list-item:hover,
.k-list-optionlabel:hover,
.k-list-item.k-hover,
.k-hover.k-list-optionlabel {
  color: var(--body-color);
  background-color: var(--bg-k-list-item-hover);
}

.k-button-md {
  font-size: 13px;
}

/* modal */
.k-dialog-buttongroup {
  /* background-color: ; */
  padding: 5px 8px;
}
/* responsive */
@media (max-width: 600px) {
  .k-dialog {
    width: 90% !important;
  }
}

.k-toolbar {
  padding: 2px 4px;
  gap: 3px;
  justify-content: flex-end;
  border-color: var(--tblr-border-color);
  background-color: var(--bg-color-toolbar);
}

.k-window-title {
  font-size: 13px;
}

.k-window {
  font-size: 13px;
  top: 25%;
  transform: translate(-50%, -25%);
  background-color: var(--bg-color-content);
  color: var(--tblr-body-color);
  border-color: var(--tblr-border-color);
}

.k-window.k-dialog {
  max-height: 94%;
}

.k-window-titlebar {
  padding-block: 8px;
  padding-inline: 10px;
  background-color: var(--bg-color-primary);
}

.k-icon-button.k-button-md > .k-button-icon {
  min-width: unset;
  min-height: unset;
}

.k-window-content,
.k-prompt-container {
  padding-block: 10px;
  padding-inline: 10px;
}

.h-label {
  font-size: 13px;
  margin-bottom: 2.5px;
}

.h-validate-input .h-error {
  color: #fff;
  background-color: red;
  display: block;
  font-size: 13px;
}

.h-validate-input .k-tooltip {
  background-color: red;
}

.h-validate-input .k-tooltip .k-callout {
  border-top-color: red;
}

/* Start Grid*/
.h-table-content {
  position: relative;
  width: 100%;
  min-height: 300px;
}

.k-grid {
  font-size: 13px;
  border-color: var(--tblr-border-color);
  color: var(--body-color);
}

.k-grid-content {
  background-color: var(--bg-grid-content);
}

.k-grid-header,
.k-grouping-header,
.k-grid-add-row,
.k-grid-footer,
.k-pager-wrap {
  background-color: var(--bg-color-toolbar);
  color: var(--body-color);
}

.k-grid .k-grid-filter,
.k-grid .k-header-column-menu,
.k-grid .k-hierarchy-cell .k-icon {
  background-color: var(--bg-color-toolbar);
  color: var(--body-color);
}

.k-grid-header .k-grid-filter:hover,
.k-grid-header .k-header-column-menu:hover,
.k-grid-header .k-hierarchy-cell .k-icon:hover {
  background-color: var(--grid-filter-hover);
}

.k-grid tbody tr:not(.k-detail-row):hover,
.k-grid tbody tr:not(.k-detail-row).k-state-hover {
  background-color: var(--k-grid-tr-hover);
}

.k-grid th,
.k-grid td {
  white-space: nowrap;
  padding: 4px 6px;
}

.k-grid th,
.k-grid-footer td,
.k-group-footer td,
.k-grouping-row td {
  font-weight: 500;
}

.k-grid td.k-state-selected,
.k-grid tr.k-state-selected > td {
  background-color: rgba(18, 116, 172, 0.25);
}

.k-grid .k-grid-content-locked .k-state-selected td {
  background-color: #c4dcea;
}

.k-grid .k-grid-content-locked .k-state-selected.k-alt td {
  background-color: #bed5e3;
}

.k-grid .k-grid-content-locked .k-state-selected:hover td,
.k-grid .k-grid-content-locked .k-state-selected.k-state-hover td {
  background-color: #b9d0dd;
}

.k-master-row.k-state-selected .k-grid-content-sticky,
.k-master-row.k-state-selected .k-grid-row-sticky,
.k-master-row td.k-grid-content-sticky.k-state-selected {
  background-color: #c4dcea;
}

.k-master-row.k-state-selected.k-alt .k-grid-content-sticky,
.k-master-row.k-state-selected.k-alt .k-grid-row-sticky,
.k-master-row.k-alt td.k-grid-content-sticky.k-state-selected {
  background-color: #bed5e3;
}

.k-master-row.k-state-selected:hover .k-grid-content-sticky,
.k-master-row.k-state-selected:hover .k-grid-row-sticky,
.k-master-row.k-state-selected.k-state-hover .k-grid-content-sticky,
.k-master-row.k-state-selected.k-state-hover .k-grid-row-sticky,
.k-master-row:hover td.k-grid-content-sticky.k-state-selected,
.k-master-row.k-state-hover td.k-grid-content-sticky.k-state-selected {
  background-color: #ebebeb;
}

.k-pager-wrap {
  padding: 4px 6px;
}

.k-pager-numbers .k-link.k-state-selected {
  color: #1274ac;
  /* background: #c4dcea; */
  background: var(--k-popup-bg-color);
  border-radius: 50%;
  border: 1px solid var(--tblr-border-color);
}

.k-grid-header .k-i-sort-asc-sm,
.k-grid-header .k-i-sort-desc-sm,
.k-grid-header .k-sort-order {
  color: var(--bg-color-selected);
}

.k-grid-header .k-grid-filter.k-state-active,
.k-grid-header .k-header-column-menu.k-state-active,
.k-grid-header .k-hierarchy-cell .k-icon.k-state-active {
  color: white;
  background-color: var(--bg-color-selected);
}

.k-grid-header,
.k-header,
th.k-header,
.k-grid-header-wrap,
.k-grouping-header,
.k-grouping-header .k-group-indicator,
.k-grid td,
.k-grid-footer,
.k-grid-footer-wrap,
.k-grid-content-locked,
.k-grid-footer-locked,
.k-grid-header-locked,
.k-filter-row > td,
.k-filter-row > th {
  border-color: var(--tblr-border-color);
}

/* End Grid */

/* loader */
.grid-initial-data-loader .k-loader-container-overlay.k-overlay-light {
  background-color: white;
}

.initial-data-loader {
  position: fixed;
}

.k-loader-container {
  z-index: 10009;
}

.k-loader-segment,
.grid-initial-data-loader .k-loader-segment,
.initial-data-loader .k-loader-segment {
  color: var(--bg-color-selected);
}
/* end loader */

/* start notification */

.k-notification {
  padding: 2px 4px;
}

.k-notification-wrap {
  align-items: center;
}

.k-notification-wrap .k-icon {
  font-size: 13px;
}

.k-notification-group {
  z-index: 10010;
}

.k-notification-error {
  border-color: #d51923;
  background-color: #d51923;
}

.k-notification-warning {
  border-color: #fdce3e;
  background-color: #fdce3e;
}

.k-notification-success {
  border-color: #278200;
  background-color: #278200;
}

.k-notification-info {
  border-color: #0058e9;
  background-color: #0058e9;
}
/* end notification */

/* Checkbox */
.k-checkbox:checked,
.k-radio:checked,
.k-radio.k-checked,
.k-checkbox.k-checked {
    border-color: var(--bg-color-selected);
    /* color: white; */
    background-color: var(--bg-color-selected);
}

.k-checkbox:checked:focus,
.k-checkbox.k-checked.k-focus,
.k-radio:checked:focus,
.k-radio.k-checked.k-state-focus{
  box-shadow: unset;
}

.k-checkbox:focus,
.k-checkbox.k-focus {
  box-shadow: unset;
}

.k-checkbox:indeterminate,
.k-checkbox.k-indeterminate {
  color: #1274ac;
}

.k-checkbox:indeterminate,
.k-checkbox.k-indeterminate {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%231274AC' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M4,8 h8'/%3e%3c/svg%3e");
}
/* end Checkbox */
.h-link {
  color: var(--tblr-primary);
  cursor: pointer;
  width: fit-content;
}

.k-dialog.k-alert .k-dialog-buttongroup .k-button-md {
  border-radius: 4px;
}

.k-chart text {
  font: unset !important;
  font-size: 13px !important;
}

/* Breadcrumb */
.h-breadcrumb {
  border-top: 1px solid;
  border-left: 1px solid;
  border-right: 1px solid;
  border-color: var(--tblr-border-color);
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  background-color: var(--bg-color-surface);
  box-shadow: inset 0 calc(-1 * 1px) 0 0 var(--tblr-border-color);
  font-size: 13px;
}

.k-breadcrumb {
  font-size: 13px;
  background-color: unset;
}

.k-breadcrumb-link,
.k-breadcrumb-root-link {
  padding-block: 4px;
  padding-inline: 8px;
}

.k-breadcrumb-link {
  color: var(--bg-color-selected);
}

.k-breadcrumb-link:hover,
.k-breadcrumb-link.k-hover {
  color: var(--btn-color-hover);
  background-color: unset;
}

.k-breadcrumb-link:focus,
.k-breadcrumb-link.k-focus {
  color: var(--bg-color-selected);
  box-shadow: none;
}

.k-breadcrumb-root-link:hover,
.k-breadcrumb-root-link.k-hover {
  background-color: unset;
}

.k-breadcrumb-root-link:focus,
.k-breadcrumb-root-link.k-state-focused {
  box-shadow: unset;
}

.k-breadcrumb-delimiter,
.k-breadcrumb-delimiter-icon {
  font-size: 13px;
}

.k-breadcrumb-root-link {
  margin-right: 0;
}

.h-content-filter {
  border-left: 1px solid;
  border-right: 1px solid;
  border-color: var(--tblr-border-color);
  padding: 0.35rem;
  background-color: var(--bg-color-surface);
}
/* end */

.h-flexbox {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.h-button--login img {
  width: 14px;
  height: 14px;
}

/* k-popup */
.k-popup {
  border-color: var(--tblr-border-color);
  color: var(--body-color);
  background-color: var(--k-popup-bg-color);
  margin-top: 2px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.03), 0 4px 5px 0 rgba(0, 0, 0, 0.04);
}

.k-content {
  color: var(--body-color);
  background-color: var(--k-popup-bg-color);
}
/* End  */

/* responsive */
@media screen and (max-width: 767px) {
  .h-flexbox {
    display: inline-block !important;
    width: 100% !important;
  }

  .h-flexbox > div {
    width: 100% !important;
  }

  /* .h-table-content{
    height: 450px;
  } */
}

[data-bs-theme="dark"] .navbar-brand-autodark svg {
  filter: brightness(0) invert(1);
}

#navbar-menu .navbar {
  background-color: var(--k-bg-color-navbar);
}

#navbar-menu .navbar .nav-link {
  color: var(--k-color-navbar);
}

#navbar-menu .navbar .nav-link .nav-link-icon {
  color: var(--k-color-navbar);
}

@media (max-width: 767.98px) {
  .navbar-expand-md .navbar-collapse .dropdown-menu .dropdown-item {
    color: var(--k-color-navbar);
  }
}

.k-breadcrumb {
  color: var(--tblr-nav-link-color);
}

/* box-content chart */
.h-chart-content {
  border: 1px solid var(--tblr-border-color);
  box-sizing: border-box;
}

/*input text end*/
.k-numerictextbox input {
  text-align: end;
}

/**/
.table > :not(caption) > * > *,
.markdown > table > :not(caption) > * > * {
  padding: 5px;
}

/*Sheduler*/
.k-scheduler {
  font-size: 13px;
  border-color: var(--tblr-border-color);
}

.k-event {
  background-color: var(--bg-color-selected);
}

.k-event.k-state-selected {
  background-color: var(--btn-color-hover);
}

/*Tabstrip*/
.k-tabstrip-items-wrapper .k-item {
    color: var(--bg-color-selected);
}
    .k-tabstrip-items-wrapper .k-item:hover,
    .k-tabstrip-items-wrapper .k-item.k-state-hover {
        color: var(--btn-color-hover);
    }
    /**/
    .dropdown-divider {
        margin: 10px 0;
        --tblr-dropdown-divider-bg: var(--tblr-border-color-translucent);
    }

.h-splitter {
    border-top: 0px !important;
}

/* TreeView Start */

/* TreeView End */

.gallery .box-container {
    columns: 3 25rem;
    column-gap: 1.5rem;
}

    .gallery .box-container .box {
        margin-bottom: 1rem;
        break-inside: avoid;
    }

        .gallery .box-container .box img {
            width: 100%;
            /*max-width: 300px;*/
            border-radius: 1rem;
            margin-bottom: 1rem;
        }