:root {
  --bs-body-font-size: 0.875rem;          /* chữ nhỏ hơn */
  --bs-body-font-family: 'Roboto', sans-serif;
  --bs-body-font-weight: 300;             /* mỏng */
  --bs-body-line-height: 1.4;
  --bs-heading-font-family: 'Roboto', sans-serif;
  --bs-heading-font-weight: 400;
}
.nxl-container{
  top:79px;
}
.main-content{
  padding: 5px !important;
}
.minimenu .nxl-container{
  margin-left: 120px !important;
}

/* === CHUNG === */
.action-btn-left,
.action-btn-right {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: white;
  padding: 0.5rem 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  opacity: 0;
  transition: transform 0.35s ease, opacity 0.35s ease;
  z-index: 10;
  pointer-events: none;
}

.action-btn-left-h,
.action-btn-right-h {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: white;
  padding: 0.5rem 0.75rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  opacity: 0;
  transition: transform 0.35s ease, opacity 0.35s ease;
  z-index: 10;
  pointer-events: none;
}

.action-btn-left button,
.action-btn-right button,
.action-btn-left-h button,
.action-btn-right-h  button{
  width: 100%;
  white-space: nowrap;
}

/* === PHẢI (TRƯỢT TỪ PHẢI) === */
.action-btn-right, .action-btn-right-h {
  right: 0;
  transform: translate(100%, -50%);
  border-radius: 0.75rem 0 0 0.75rem;
}

.action-btn-right.show, .action-btn-right-h.show {
  transform: translate(0%, -50%);
  opacity: 1;
  pointer-events: auto;
}

/* === TRÁI (TRƯỢT TỪ TRÁI) === */
.action-btn-left, .action-btn-left-h {
  left: 0;
  transform: translate(-100%, -50%);
  border-radius: 0 0.75rem 0.75rem 0;
  box-shadow: -2px 2px 10px rgba(0, 0, 0, 0.15);
}

.action-btn-left.show, .action-btn-left-h.show {
  transform: translate(0%, -50%);
  opacity: 1;
  pointer-events: auto;
}


.no-select-temp {
  user-select: none !important;
}
body.modal-open .nxl-container, body.modal-open .nxl-header, body.modal-open .nxl-navigation, body.modal-open .page-header{
    filter: none !important;
}
.card {
    border: 1px solid rgba(0, 0, 0, 0.175);
}

/* Tổng thể span bao nội dung tiêu đề + mũi tên + nút clear */
th > span.sorting,
th > span.sorting_asc,
th > span.sorting_desc {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  text-transform: uppercase;
  color: #2c3e50;
  white-space: nowrap;
  cursor: pointer;
}

/* Nút "×" để clear sort */
th > span .clear-sort {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-size: 0.8em;
  color: #888;
  cursor: pointer;
  line-height: 1;
  transform: translateY(-1px);
  opacity: 0.6;
  transition: opacity 0.2s;
}

th > span .clear-sort:hover {
  opacity: 1;
  color: #e74c3c;
}

/* Mũi tên sort hiển thị cuối span */
th > span.sorting::after {
  content: "▲▼";
  font-size: 0.7em;
  color: #ccc;
  opacity: 0.4;
}

th > span.sorting_asc::after {
  content: "▲";
  color: #3498db;
  font-size: 0.7em;
  opacity: 0.9;
}

th > span.sorting_desc::after {
  content: "▼";
  color: #3498db;
  font-size: 0.7em;
  opacity: 0.9;
}

.table-responsive .table tr td {
  vertical-align: top !important;
  padding: 5px !important;
  white-space: normal !important;
}

td:last-child {
  position: relative;
  overflow: hidden;
}
.table-responsive .table tr{
  position: relative;
}

/* Base style */
.bottom-info {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 8px 16px;
  font-size: 14px;
  z-index: 1;
  transition: all 0.3s ease;
}

/* 1. Luôn hiển thị */
.bottom-info-static {
  display: block;
}

/* 2. Hover mới hiển thị */
.bottom-info-hover {
  display: none;
}

/* Khi hover cha td, td phải có position: relative */
td:hover .bottom-info-hover {
  display: block;
}

/* Nội dung bên trong */
.bottom-info .info-grid {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}


@media (min-width: 768px) {
  .bottom-info .info-grid {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

.nxl-navigation .navbar-content .nxl-submenu .nxl-link {
    padding: 7px 3px !important;
    margin-left: 27px !important;
    margin-right: 0px !important;
}
.nxl-header{
  top:0px;
  max-height: 80px;
}
.nxl-header .header-wrapper .nxl-notifications-menu {
  width: 360px !important;
  max-width: 90vw;
}
@media (max-width: 768px) {
  .nxl-header .header-wrapper .nxl-notifications-menu {
    width: 100% !important;
  }
}

@media (max-width: 480px) {
  .nxl-header .header-wrapper .nxl-notifications-menu {
    width: 100% !important;
    max-width: 100vw;
  }
}

/* Base (1920px) */
.small,
.xsmall {
  font-size: 1em !important;       /* ~16px */
  line-height: 1.4 !important;
}

.xxsmall {
  font-size: 0.875em !important;   /* ~14px */
  line-height: 1.3 !important;
}

/* ≥ 2560px (2K trở lên) */
@media (min-width: 2560px) {
  .small,
  .xsmall {
    font-size: 1.125em !important;   /* ~18px */
    line-height: 1.45 !important;
  }

  .xxsmall {
    font-size: 1em !important;       /* ~16px */
    line-height: 1.35 !important;
  }
}

/* ≥ 3840px (4K) */
@media (min-width: 3840px) {
  .small,
  .xsmall {
    font-size: 1.25em !important;    /* ~20px */
    line-height: 1.5 !important;
  }

  .xxsmall {
    font-size: 1.125em !important;   /* ~18px */
    line-height: 1.4 !important;
  }
}

/* < 1920px */
@media (max-width: 1919.98px) {
  .small,
  .xsmall {
    font-size: 0.9375em !important;   /* ~15px */
    line-height: 1.35 !important;
  }

  .xxsmall {
    font-size: 0.8125em !important;   /* ~13px */
    line-height: 1.25 !important;
  }
}

/* < 1600px */
@media (max-width: 1599.98px) {
  .small,
  .xsmall {
    font-size: 0.875em !important;    /* ~14px */
    line-height: 1.3 !important;
  }

  .xxsmall {
    font-size: 0.75em !important;     /* ~12px */
    line-height: 1.2 !important;
  }
}

/* < 1366px */
@media (max-width: 1365.98px) {
  .small,
  .xsmall {
    font-size: 0.8125em !important;   /* ~13px */
    line-height: 1.25 !important;
  }

  .xxsmall {
    font-size: 0.6875em !important;   /* ~11px */
    line-height: 1.15 !important;
  }
}

/* < 1024px */
@media (max-width: 1023.98px) {
  .small,
  .xsmall {
    font-size: 0.75em !important;     /* ~12px */
    line-height: 1.2 !important;
  }

  .xxsmall {
    font-size: 0.625em !important;    /* ~10px */
    line-height: 1.1 !important;
  }
}

/* < 768px */
@media (max-width: 767.98px) {
  .small,
  .xsmall {
    font-size: 0.6875em !important;   /* ~11px */
    line-height: 1.15 !important;
  }

  .xxsmall {
    font-size: 0.5625em !important;   /* ~9px */
    line-height: 1.05 !important;
  }
}

/* < 480px */
@media (max-width: 479.98px) {
  .small,
  .xsmall {
    font-size: 0.625em !important;    /* ~10px */
    line-height: 1.1 !important;
  }

  .xxsmall {
    font-size: 0.5em !important;      /* ~8px */
    line-height: 1 !important;
  }
}

.truncate-1-line .truncate-2-lines, .truncate-3-lines, .truncate-4-lines {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.truncate-1-line { -webkit-line-clamp: 1; }
.truncate-2-lines { -webkit-line-clamp: 2; }
.truncate-3-lines { -webkit-line-clamp: 3; }
.truncate-4-lines { -webkit-line-clamp: 4; }
.badge-tour-code {
  background-color: #198754;
  color: #fff;
  padding: 8px;
}

@media (max-width: 576px) {
  .badge-tour-code {
    font-size: 0.75rem;
    padding: 0.3rem 0.75rem;
    letter-spacing: 0.3px;
  }
}

.nxl-container .page-header-collapse .accordion-body{
  padding: 10px 30px 20px 30px;
}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active{
  font-weight: bold;
  background: powderblue;
}
.scroll-top,
.scroll-bottom {
  overflow-x: auto;
  overflow-y: hidden;
  height: 16px;
}
.scroll-top {
  margin-bottom: 4px;
}
.scroll-bottom {
  margin-top: 4px;
}
.scroll-top::-webkit-scrollbar,
.scroll-bottom::-webkit-scrollbar {
  height: 8px;
}
.shadow-bottom-line {
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}
/********** dynamic form field customs *************/
.dynamic-form-field-sm{
  width: 100%;
}
.dynamic-form-field-sm input.form-control,
.dynamic-form-field-sm select.form-select,
.dynamic-form-field-sm textarea.form-control,
.dynamic-form-field-sm .form-check-input,
.dynamic-form-field-sm .form-range {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem; /* tương đương 14px */
  line-height: 1.25;
  border-radius: 0.2rem;
}

.dynamic-form-field-sm select.form-select {
  /*padding-right: 2.25rem;*/
  /*padding:8px;*/
}

/*.dynamic-form-field-sm .form-check-input {
  width: 1rem;
  height: 1rem;
  margin-top: 0.3em;
}*/

/*.dynamic-form-field-sm .form-control-color {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0.1rem;
}*/

.dynamic-form-field-sm input[type="range"] {
  height: 1rem;
}

.dynamic-form-field-sm label.form-label {
  font-size: 0.85rem;
  margin-bottom: 0.25rem;
}
.dynamic-form-field-sm .vs__dropdown-toggle {
  padding: 1px;
  font-size: 0.875rem;
  min-height: auto;
}
.dynamic-form-field-sm .vs__search{
  font-size: 12px;
  line-height: 20px;
}
.dynamic-form-field-sm .vs__dropdown-menu{
  font-size: 12px;
  width: max-content;
}
.dynamic-form-field-sm .vs__selected{
  font-size: 12px;
  margin:0px;
  width: 100%;
}
.vs__dropdown-toggle {
  padding: 8px 15px;
  border-color: #e5e7eb;
}
.vs__selected {
  /*display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;*/
  display: flex;
  flex-direction: row;
  gap:3px;
  /*padding: 3px;*/
}
.v-select:not(.vs--open) .vs__search{
  width: 1px;
  opacity: 0;
}
.dropdown-magic-select-list table td{
  font-size: 12px;
}
.btn.btn-sm i, button.btn-sm i{
  font-size:16px;
}

.process-tabs-wrapper {
  font-size: 14px;
}

.process-tabs-wrapper .process-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid #dee2e6;
  flex-wrap: wrap;
}

.process-tabs-wrapper .process-tab {
  display: flex;
  align-items: center;
  padding: 6px 10px 6px 12px;
  font-size: 14px;
  font-weight: 500;
  background: #f1f1f1;
  border: 1px solid #dee2e6;
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  cursor: pointer;
  position: relative;
  transition: background 0.2s;
}

.process-tabs-wrapper .process-tab:hover {
  background: #e9ecef;
}

.process-tabs-wrapper .process-tab.active {
  background: #ffffff;
  border-bottom: 1px solid #ffffff;
  font-weight: 600;
}

.process-tabs-wrapper .close-btn {
  margin-left: 8px;
  font-size: 14px;
  color: #888;
  cursor: pointer;
  transition: color 0.2s;
}

.process-tabs-wrapper .close-btn:hover {
  color: #dc3545;
}

.process-tabs-wrapper .process-tab-content {
  border: 1px solid #dee2e6;
  border-radius: 0 0 4px 4px;
  padding: 16px;
  background: #ffffff;
  min-height: 150px;
}

.process-tabs-wrapper .tab-pane {
  display: none;
}

.process-tabs-wrapper .tab-pane.show.active {
  display: block;
}
.amount-currency-wrap {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.amount-currency-wrap .amount-input {
  flex: 1;
  min-width: 0;
}

.amount-currency-wrap .currency-select {
  width: 100px;
  flex-shrink: 0;
}

.amount-unit-wrap {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.amount-unit-wrap .amount-input {
  flex: 1;
  min-width: 0;
}

.amount-unit-wrap .unit-select {
  width: 100px;
  flex-shrink: 0;
}

/*:root {
    --brand-dark: #212529; 
    --border-color: #dee2e6;
    --black: #000;
    --gray-600: #6c757d;
    --dark: #343a40;
    --hover-color: #f0f0f5; 
    --active-color: #e2e6ea;
    --white: #ffffff;
    --primary: #0d6efd;

    --font-10: 0.75rem;
    --font-11: 0.6875rem;
    --font-12: 0.8125rem;
    --font-700: 700;
    --font-uppercase: uppercase;
}
*/
.table-responsive-extra .table {
    color: var(--brand-dark);
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    border-color: var(--border-color);
    vertical-align: middle;
}
.table-responsive-extra .table:not(caption) > * {
    /* Đảm bảo border chung của bảng không ảnh hưởng đến border từng hàng */
    border-color: transparent !important;
}
.table-responsive-extra .table thead th {
    border-bottom: 1px solid var(--border-color);
}
.table-responsive-extra .table thead th,
.table-responsive-extra .table tfoot th {
    padding: 8px 15px;
    color: var(--brand-dark);
    font-size: var(--font-10);
    font-weight: var(--font-700);
    text-transform: var(--font-uppercase);
}
.table-responsive-extra .table thead th:first-child,
.table-responsive-extra .table tfoot th:first-child {
    padding-left: 30px;
}
.table-responsive-extra .table thead th:last-child,
.table-responsive-extra .table tfoot th:last-child {
    padding-right: 30px;
}
/* Loại bỏ border dưới cho dòng cuối cùng của bảng */
/*.table-responsive-extra .table tbody tr:last-of-type * {
    border-bottom: transparent !important;
}*/
.table-responsive-extra .table > tr > td {
    padding: 15px 15px;
    white-space: nowrap;
    vertical-align: middle;
    /* Mặc định không có border-top và border-bottom cho td */
    border-top: transparent !important;
    border-bottom: transparent !important;
}
.table-responsive-extra .table > tr > td:first-child {
    padding-left: 30px;
}
.table-responsive-extra .table > tr > td:last-child {
    padding-right: 30px;
}
.table-responsive-extra .table.table-dark {
    border-color: var(--black) !important;
}
.table-responsive-extra .table.table-dark tr,
.table-responsive-extra .table.table-dark td,
.table-responsive-extra .table.table-dark th {
    color: var(--gray-600);
    border-color: var(--dark);
}
/* Vô hiệu hóa hiệu ứng hover mặc định của Bootstrap */
.table-responsive-extra .table.table-striped > tbody > tr:nth-of-type(odd) > *,
.table-responsive-extra .table.table-hover > tbody > tr:hover > * {
    --bs-table-accent-bg: transparent; /* Đặt lại thành trong suốt để JS/CSS tùy chỉnh kiểm soát */
    background-color: transparent !important; /* Ghi đè bất kỳ màu nền nào */
}

/* --- Custom styles for rows with/without sub-row (và hover/active đồng bộ) --- */
.table-responsive-extra .table tbody {
    border-top: none; /* Loại bỏ border-top mặc định của tbody */
}

/* Quy tắc cho trạng thái ACTIVE (ưu tiên cao hơn hover) */
.table-responsive-extra .table tbody .main-row.table-active,
.table-responsive-extra .table tbody .sub-row.table-active,
.table-responsive-extra .table tbody .no-sub-row.table-active {
    background-color: var(--active-color) !important; /* Màu active, dùng !important để ưu tiên */
    box-shadow: none;
    transition: all 0.3s ease;
}
.table-responsive-extra .table tbody .main-row.table-active > *,
.table-responsive-extra .table tbody .sub-row.table-active > *,
.table-responsive-extra .table tbody .no-sub-row.table-active > * {
    background-color: var(--active-color) !important; /* Màu nền cho từng ô con */
}

/* Loại bỏ hiệu ứng hover nếu dòng đang active (thêm vào đây) */
.table-responsive-extra .table tbody .main-row.table-active.hovered,
.table-responsive-extra .table tbody .sub-row.table-active.hovered,
.table-responsive-extra .table tbody .no-sub-row.table-active.hovered {
    background-color: var(--active-color) !important; /* Giữ nguyên màu active khi hover */
}
.table-responsive-extra .table tbody .main-row.table-active.hovered > *,
.table-responsive-extra .table tbody .sub-row.table-active.hovered > *,
.table-responsive-extra .table tbody .no-sub-row.table-active.hovered > * {
    background-color: var(--active-color) !important; /* Giữ nguyên màu active khi hover */
}


/* Quy tắc cho trạng thái HOVER (chỉ khi không active) */
.table-responsive-extra .table tbody .main-row.hovered:not(.table-active),
.table-responsive-extra .table tbody .sub-row.hovered:not(.table-active),
.table-responsive-extra .table tbody .no-sub-row.hovered:not(.table-active) {
    background-color: var(--hover-color); /* Sử dụng biến màu hover thống nhất */
    box-shadow: none;
    transition: all 0.3s ease;
}
/* Đảm bảo các ô con cũng nhận màu nền hover */
.table-responsive-extra .table tbody .main-row.hovered:not(.table-active) > *,
.table-responsive-extra .table tbody .sub-row.hovered:not(.table-active) > *,
.table-responsive-extra .table tbody .no-sub-row.hovered:not(.table-active) > * {
    background-color: var(--hover-color); /* Sử dụng biến màu hover thống nhất */
}

/* === BORDER LOGIC MỚI === */

/* Tất cả main-row đều có border-top */
.table-responsive-extra .table tbody .main-row td {
    border-top: 1px solid var(--border-color) !important;
}
/* Loại bỏ border-top của main-row đầu tiên trong tbody */
.table-responsive-extra .table tbody .main-row:first-of-type td {
     border-top: transparent !important;
}

/* sub-row liền mạch với main-row, có padding dưới và border-bottom để phân tách nhóm */
.table-responsive-extra .table tbody .sub-row > td {
    padding-top: 0 !important; /* Đảm bảo không có khoảng trống giữa main và sub */
    padding-bottom: 15px !important; /* Khoảng cách cuối nhóm */
    /*border-bottom: 3px solid var(--border-color) !important;*/
}

/* Dòng không có dòng phụ: có border-top và border-bottom */
.table-responsive-extra .table tbody .no-sub-row td {
    border-top: 1px solid var(--border-color) !important;
    /*border-bottom: 1px solid var(--border-color) !important;*/
    padding-bottom: 15px !important;
}
/* Loại bỏ border-top của no-sub-row đầu tiên trong tbody */
.table-responsive-extra .table tbody .no-sub-row:first-of-type td {
    border-top: transparent !important;
}
/* Dòng cuối cùng của tbody sẽ không có border-bottom (quy tắc chung) */
.table-responsive-extra > .table > tbody > tr:last-of-type > td {
    border-bottom: transparent !important;
}

.border-bottom-1{
  border-bottom: 1px solid var(--border-color) !important;
}

.border-bottom-2{
  border-bottom: 2px solid var(--border-color) !important;
}

.border-bottom-3{
  border-bottom: 3px solid var(--border-color) !important;
}

.table-responsive-extra .table tbody .sub-row .sub-row-content {
    padding: 5px 15px;
    background-color: transparent;
    font-size: 0.875rem;
    color: var(--gray-600);
}
/* --- End Custom styles for sub-row --- */

/* Generic selected row styling */
.table-responsive-extra tbody > tr.selected > * { /* Có thể thay thế bằng .table-active nếu muốn */
    color: var(--dark);
    box-shadow: inset 0 0 0 #eeeef5;
}
.table-responsive-extra tbody > tr.selected > * a {
    color: var(--dark);
}

/* Generic styles for filter/length controls */
.table-responsive-extra .table-filter input,
.table-responsive-extra .table-filter select,
.table-responsive-extra .table-length input,
.table-responsive-extra .table-length select {
    padding: 8px 15px;
}

/* Generic pagination styles */
.table-responsive-extra .table-paginate .page-link {
    color: var(--dark);
    font-size: var(--font-12);
    box-shadow: none !important;
    border-color: #e9ecef; /* darken($gray-100, 1) */
}
.table-responsive-extra .table-paginate .active > .page-link,
.table-responsive-extra .table-paginate .page-link.active {
    color: var(--white) !important;
    background-color: var(--primary);
}
.table-responsive-extra .table-paginate .disabled > .page-link,
.table-responsive-extra .table-paginate .page-link.disabled {
    color: var(--gray-400);
}

/* Generic table info styles */
.table-responsive-extra .table-info {
    font-size: var(--font-11);
    margin-top: 1rem;
}

/* === Table Compact: dùng cho subform, modal, vùng hiển thị hạn chế === */
/*.table-responsive-extra .table.table-compact td,
.table-responsive-extra .table.table-compact th {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    font-size: 0.875rem; /* Có thể giảm nếu cần */
}*/
/*.table-responsive-extra .table.table-compact td:first-child,
.table-responsive-extra .table.table-compact th:first-child {
    padding-left: 8px !important;
}
.table-responsive-extra .table.table-compact td:last-child,
.table-responsive-extra .table.table-compact th:last-child {
    padding-right: 8px !important;
}*/

.v-select .vs__selected{
  display: flex;
}
.v-select.p-0 .vs__dropdown-toggle{
  padding:5px;
}
.circle-number{
  width: 30px;
  height: 30px;
  color: #283c50;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  transition: all .3s ease;
  border: 1px solid #e8eaf2;
}
.bg-readonly{
  background-color: #e9ecef !important;
}
.bg-filter{
  /*background-color: #e3f2fd !important;*/
}
.vs--disabled .vs__clear, .vs--disabled .vs__dropdown-toggle, .vs--disabled .vs__open-indicator, .vs--disabled .vs__search, .vs--disabled .vs__selected{
  background-color: #e9ecef !important;
}

.form-control[contenteditable="false"] {
  background-color: #e9ecef !important; /* Giống input disabled */
  pointer-events: none;      /* Không cho click focus */
  color: #6c757d;            /* Màu chữ nhạt hơn */
  user-select: none;         /* Không cho bôi đen */
}

.modal-xxl {
  max-width: 90vw;
  width: 90vw;
}
.modal-100 {
  max-width: 100vw;
  width: 100vw;
}
.modal-90 {
  max-width: 90vw;
  width: 90vw;
}
.modal-80 {
  max-width: 80vw;
  width: 80vw;
}
.modal-70 {
  max-width: 80vw;
  width: 80vw;
}
@media (max-width: 576px) {
  .modal-xxl, .modal-100, .modal-90, .modal-80, .modal-70 {
    max-width: 100vw;
    width: 100vw;
    margin: 0;
    border-radius: 0;
  }
}
.main-row.even-row{
  border-color: #f8f9fa;
}
.even-row {
  background-color: #f8f9fa; /* màu sáng hơn cho dòng chẵn */
}

.odd-row {
  background-color: #ffffff; /* màu mặc định cho dòng lẻ */
}

.vs__dropdown-toggle input.active,.vs__dropdown-toggle  input.focus,.vs__dropdown-toggle  input:active,.vs__dropdown-toggle  input:focus{
  border: 1px solid transparent !important;
}
.page-header{
  background: transparent !important;
}

.dynamic-form-field-sm textarea.form-control-sm, 
.dynamic-form-field-sm input.form-control-sm{
  /*font-size: 11px !important;*/
}

.dynamic-form-field-sm textarea.form-control-sm, 
.dynamic-form-field-sm input.form-control-sm,
.dynamic-form-field-md textarea.form-control-md, 
.dynamic-form-field-md input.form-control-md{
  padding: 0px 6px !important;;
  width: 100%;
  border-width: 1px !important;
  border: 1px solid #e5e7eb !important;
}

.flatpickr-input + input[readonly] {
  cursor: pointer;
  background-color: field !important;
  max-width: 105px !important;
}

.dynamic-form-field-sm textarea[readonly]:not(.flatpickr-input + input),
.dynamic-form-field-sm input[readonly]:not(.flatpickr-input + input),
.dynamic-form-field-md textarea[readonly]:not(.flatpickr-input + input),
.dynamic-form-field-md input[readonly]:not(.flatpickr-input + input) {
  background-color: #e9ecef !important;
}


.heavy-shadow {
  box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.3) !important;
}

.vs--single{
  padding: 0px !important;
}

.form-control-sm .vs__dropdown-toggle{
  padding:0px !important;
}
.nxl-navigation .navbar-content .nxl-link{
  font-weight: 500 !important;
}
.vs__selected-options{
  display: flex;
  flex-wrap: wrap;
  background: white;
  gap:5px;
}
.vs--disabled .vs__selected-options{
  background: unset;
}
.vs--single .vs__selected-options{
  flex-wrap: nowrap;
}
.vs__search{
  font-size: 14px;
}
.compact-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  line-height: 1.4;
  background-color: #fff;
}
.compact-table th{
  background-color: #e1e1e1 !important;
}

.compact-table th,
.compact-table td {
  border: 1px solid #ccc;
  padding: 6px 10px;
  text-align: left;
  vertical-align: top;
}

.compact-table thead {
  background-color: #f5f5f5;
  font-weight: bold;
}

.compact-table tfoot {
  background-color: #fafafa;
  font-style: italic;
  font-size: 12px;
}

.compact-table tr:nth-child(even) tbody tr {
  background-color: #f9f9f9;
}

.bg-transparent {
  background-color: transparent !important;
}

ul.nav-tabs{
  gap: 5px;
}
.nav-tabs .nav-item .nav-link{
  display: flex;
  flex-direction: row;
  align-items: center;
  gap:1px;
  border-top: 1px solid #dee2e6;
  border-left: 1px solid #dee2e6;
  border-right: 1px solid #dee2e6;
  border-bottom: none;
}

.m-header {
  display: flex;
  align-items: center;
  justify-content: center; /* căn giữa logo theo chiều ngang */
  padding: 1rem;
  background-color: #fff; /* hoặc #f8f9fa nếu bạn muốn sáng hơn */
  border-bottom: 1px solid #e0e0e0;
  min-height: 64px;
}
.dropdown-menu{
  padding: 0px;
}
.nxl-header .header-wrapper .nxl-h-dropdown.nxl-user-dropdown{
  width: 250px;
}

.simple-menu .menu-item {
  width: 150px;
  text-align: center;
  padding: 8px;
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  font-weight: 300;
  font-size: 0.85rem;
  transition: all 0.2s;
  cursor: pointer;
}

.simple-menu .menu-item:hover {
  background-color: #e9f5ff;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  animation: animate__pulse 0.3s;
}

.simple-menu .menu-item.active {
  background-color: #0d6efd;
  color: white;
  border-color: #0d6efd;
  animation: animate__fadeIn 0.3s;
}

.simple-menu .menu-item i {
  font-size: 1.2rem;
  margin-bottom: 2px;
  display: block;
}

.simple-menu .menu-item .label {
  font-weight: 400;
  font-size: 0.8rem;
}

.simple-menu .menu-item .desc {
  font-size: 0.6rem;
  opacity: 0.6;
}

.simple-menu .menu-item.avtive .desc {
  color:white;
}

/************ v-select ***********/
.vs__selected {
  display: flex;
  align-items: center;
  max-width: 100%;
  overflow: hidden;
  text-align: left;
}

.vs__selected span {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: inline-block;
}

.vs__deselect {
  flex: 0 0 auto;
  margin-left: 4px;
}
.card .card-header .card-title{
  font-size:13px;
}

/************ ALL TD *************/
td{  
  position: relative !important;
  overflow: visible !important;
}

.note-google-style {
  background-color: #fff8c4 !important;   /* vàng nhạt kiểu Google Keep */
  color: #333 !important;                 /* chữ đậm dễ đọc */
  border-left: 4px solid #f4d03f !important; /* vàng đậm bên trái */
  border-radius: 0.375rem;
  white-space: pre-wrap;       /* hỗ trợ xuống dòng */
}
.full-cell{
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 2px;
  top: 2px;
}

.notification-purple-style {
  background-color: #f3e8ff !important;     /* tím nhạt */
  color: #4a0072 !important;                /* tím đậm */
  border-left: 4px solid #ce93d8 !important; /* tím trung bình */
  border-radius: 0.375rem;
  white-space: pre-wrap;
  padding: 12px 16px;
  font-size: 14px;
}

.currency-select{
  width: 64px !important;
}

.table-responsive {
    overflow-y: hidden !important;
}

/************* Overwrite scrollbar modal cho đậm hơn, rõ nét hơn **************/
.modal-body {
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: #888 #f1f1f1; /* Firefox */
}

.modal-body {
  scrollbar-width: auto !important;
  scrollbar-color: #4CAF50 #f1f1f1 !important;
}

/* Webkit (Chrome, Edge, Safari) */
.modal-body::-webkit-scrollbar {
  width: 10px;
}

.modal-body::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

.modal-body::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 10px;
}

.modal-body::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.offcanvas-body h6 {
  font-size: 0.9rem;
}
.offcanvas-body label.form-label {
  font-size: 0.85rem;
}

.offcanvas {
  transition: transform 0.2s ease-in-out !important; /* hoặc: none */
}
.custom-close-btn {
  position: absolute;
  top: -12px;
  right: -12px;
  z-index: 1055;
  background-color: #fff;
  border: 1px solid #dee2e6;
  border-radius: 50%;
  padding: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  transition: all 0.2s ease-in-out;
}

.custom-close-btn:hover {
  background-color: #f8d7da;
  border-color: #f5c2c7;
}

.i-fw-normal{
  font-size: 14px !important;
}
.html-editor{
  font-style: normal;
}
.html-editor i{
  font-style: italic;
}
.tms-line-clamp-1 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;

  overflow: hidden;

  line-height: 1.4;
  max-height: 2.0em;      /* 1 dòng */
}

.tms-line-clamp-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;

  overflow: hidden;

  line-height: 1.4;
  max-height: 3.2em;      /* 2 dòng = 1.4 * 2 */
}

.tms-line-clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;

  overflow: hidden;

  line-height: 1.4;
  max-height: 4.2em;   /* 1.4 * 3 */
}

.tms-line-clamp-4 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;

  overflow: hidden;

  line-height: 1.4;
  max-height: 5.6em;   /* 1.4 * 4 */
}

.tms-price-table {
  font-size: 10px;
  line-height: 1;
}

.tms-price-table th,
.tms-price-table td {
  padding: 2px !important;
  vertical-align: middle;
  text-align: center;
  border: 1px solid #ccc !important;
}

.tms-price-table th.text-start,
.tms-price-table td.text-start {
  text-align: left;
}

.tms-price-table input[type="number"] {
  width: 100%;
  height: 22px;
  font-size: 10px;
  padding: 0 2px;
  border: 1px solid #ccc;
  border-radius: 2px;
  text-align: right;
  background-color: #fff;
  font-weight: bold;
  color: blue;
}
/* Chrome, Safari, Edge */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}

.tms-prices-bottom-panel {
  position: fixed !important;
  bottom: 60px;
  left: 0;
  right: 0;
  width: 100vw;
  max-height: 90vh;
  overflow-y: auto;
  background-color: #fff;
  z-index: 1105;
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.15);
}

.autocomplete {
  position: relative;
  width: 100%;
}

.autocomplete input[disabled] {
  background-color: #f5f5f5;
  color: #999;
  cursor: not-allowed;
}

.autocomplete input[type='text'] {
  width: 100%;
  padding: 6px 30px 6px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 14px;
  background: white url("data:image/svg+xml;utf8,<svg fill='gray' height='16' viewBox='0 0 24 24' width='16' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>") no-repeat right 10px center;
  background-size: 16px;
}

.autocomplete ul.suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 250px; /* 👉 Cho phép mở rộng */
  width: max-content; /* 👈 Tự rộng theo nội dung */
  max-width: 100vw; /* tránh vượt khỏi màn hình */
  background: white;
  border: 1px solid #ccc;
  border-top: none;
  border-radius: 0 0 4px 4px;
  max-height: 200px;
  overflow-y: auto;
  z-index: 1000;
  margin-top: -1px;
  padding: 0;
  list-style: none;
}

.autocomplete .suggestions li {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 14px;
  color: #333;
  white-space: nowrap; /* tránh xuống dòng */
}

.autocomplete .suggestions li:hover,
.autocomplete .suggestions li.active {
  background-color: #4caf50;
  color: white;
}

.nav_quick_instances_magic_select {
  overflow-x: auto;
  white-space: nowrap;
}

.nav_quick_instances_magic_select .nav-tabs {
  flex-wrap: nowrap !important;
  overflow-x: auto;
  overflow-y: hidden;
}

.nav_quick_instances_magic_select .nav-item {
  white-space: nowrap;
}
.nav-tabs-wrapper {
  height: auto;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
  overflow-y: hidden;
}
.nav-tabs-custom-style .nav-item {
  float: none;
  white-space: nowrap;
}
.nav-tabs-wrapper .nav-tabs-custom-style .nav-item .nav-link{
  padding: 12px 25px;
}
.bg-sub-row{
  background-color: #eaeaea;
}
.itinerary-tooltip-container{
  max-width: 800px;
}
.nxl-container .nxl-content .main-content{
  overflow-x: visible;
}

.td-settings-dropdown {
  position: absolute;
  bottom: -5px;
  right: 5px;
}

.td-settings-icon {
  font-size: 0.7rem;
  color: #6c757d;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s, transform 0.2s;
}

.td-settings-icon:hover {
  opacity: 1;
  transform: scale(1.2);
  color: #0d6efd;
}
.dropdown-menu li label span:hover {
  filter: brightness(1.1);       /* làm màu sáng hơn */
  transform: scale(1.02);        /* hơi phóng to nhẹ */
  transition: all 0.15s ease-in-out;
}
.tag-list {
  align-items: center;
}

.tag-badge {
  background-color: #f8f9fa;
  color: #333;
  font-size: 0.8rem;
  padding: 2px 8px;
  border: 1px solid #ddd;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.tag-badge .btn-close {
  width: 0.5rem;
  height: 0.5rem;
  padding: 0;
  opacity: 0.6;
}

.tag-badge .btn-close:hover {
  opacity: 1;
}

.tag-selector {
  min-width: 150px;
}
.nav-link-icon {
  transition: transform 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 0.75rem;
  color: #555;
}

.nav-link-icon:hover {
  transform: scale(1.1);
  text-decoration: none;
}

.nav-link-icon i {
  font-size: 1.25rem;
  margin-bottom: 2px;
}

.navbar-bottom-icon small {
  font-size: 0.75rem;
  opacity: 0.85;
}

.navbar-bottom-icon small {
  font-size: 0.75rem;
  font-weight: 600; /* tương đương fw-semibold */
  letter-spacing: 0.2px;
  color: #222 !important; /* tăng độ tương phản */
}

.hover-effect:hover {
  transform: scale(1.05);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

.transition-fast {
  transition: all 0.2s ease-in-out;
}

.addon-badge { padding-right: 22px; }
.addon-badge .addon-remove {
  opacity: 0;
  transition: opacity .15s ease-in-out;
  vertical-align: middle;
}
.addon-badge:hover .addon-remove {
  opacity: 1;
}

.tms-price-hover, .tms-prices-hover {
  display: inline-block;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}

.tms-price-hover:hover, .tms-prices-hover:hover {
  transform: scale(1.05);
}

/****** SIDE BAR TOUR PACKAGE LIBRARY  *********/
.tms-no-scroll { overflow: hidden; }

/* Khung chung */
.tms-sidebar {
  position: fixed;
  inset: 0;
  z-index: 1060;
  pointer-events: none;
}
.tms-sidebar.open { pointer-events: auto; }

/* Overlay */
.tms-sidebar__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.4);
  opacity: 0;
  transition: opacity .25s ease;
}
.tms-sidebar.open .tms-sidebar__overlay { opacity: 1; }

/* Panel phải */
.tms-sidebar__panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  background: #fff;
  box-shadow: -8px 0 24px rgba(0,0,0,.12);
  transform: translateX(100%);
  transition: transform .25s ease;
  display: flex;
  flex-direction: column;
  max-width: 1280px;
}
.tms-sidebar.open .tms-sidebar__panel { transform: translateX(0); }

/* Độ rộng tuỳ chọn */
.w-60 { width: 60vw; }
.w-70 { width: 70vw; } /* mặc định */
.w-80 { width: 80vw; }

/* Header + Body */
.tms-sidebar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .75rem 1rem;
  border-bottom: 1px solid #e9ecef;
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1;
}
.tms-sidebar__body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 1rem;
}

/* Mobile: full width */
@media (max-width: 768px) {
  .w-60, .w-70, .w-80 { width: 100vw; }
}

.bg-ocean    { background-color: #0284C7 !important; color: #FFFFFF; } /* xanh biển đậm */
.bg-forest   { background-color: #16A34A !important; color: #FFFFFF; } /* xanh lá */
.bg-sunset   { background-color: #F97316 !important; color: #FFFFFF; } /* cam hoàng hôn */
.bg-rose     { background-color: #E11D48 !important; color: #FFFFFF; } /* hồng đậm */
.bg-violet   { background-color: #7C3AED !important; color: #FFFFFF; } /* tím */
.bg-indigo   { background-color: #4F46E5 !important; color: #FFFFFF; } /* chàm */
.bg-teal     { background-color: #0D9488 !important; color: #FFFFFF; } /* xanh ngọc */
.bg-slate    { background-color: #334155 !important; color: #FFFFFF; } /* ghi xanh đậm */
.bg-amber    { background-color: #F59E0B !important; color: #111827 !important; } /* vàng hổ phách – chữ đậm */
.bg-charcoal { background-color: #1F2937 !important; color: #FFFFFF; } /* than */
.bg-tms      { background-color: rgb(231, 241, 255) !important; color: rgb(13, 110, 253);};
.truncate-50 {
  max-width: 50ch;              /* ~50 ký tự (chuẩn hơn với font monospace) */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Badge outline cho tất cả màu Bootstrap */
.badge-outline {
  background-color: transparent !important;
  border: 1px solid currentColor; 
}

/* Nếu muốn rõ ràng hơn theo từng màu */
.badge-outline-success {
  color: #198754; /* text-success */
  border: 1px solid #198754;
  background-color: transparent;
}

.badge-outline-danger {
  color: #dc3545; /* text-danger */
  border: 1px solid #dc3545;
  background-color: transparent;
}

.badge-outline-warning {
  color: #ffc107; /* text-warning */
  border: 1px solid #ffc107;
  background-color: transparent;
}

.badge-outline-secondary {
  color: #6c757d; /* text-secondary */
  border: 1px solid #6c757d;
  background-color: transparent;
}


.badge-outline-primary {
  color: #0d6efd; /* text-primary */
  border: 1px solid #0d6efd;
  background-color: transparent;
}

.rounded-10{
  border-radius: 10px;
}
.rounded-12{
  border-radius: 12px;
}
tr.removed td {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: #d9534f; /* màu đỏ nhẹ */
  text-decoration-skip-ink: auto;
  color: #999;
}

.scroll-month-profit {
  width: 600px;
  max-width: 600px;
  overflow-x: auto !important;
  overflow-y: hidden;
  white-space: nowrap;
  display: block;
}

.vs__actions{
  padding: 0px 2px !important;
}
.modal-fullscreen .modal-content{
  border-radius: 0px !important;
}
.mw-10  { max-width: 10%; }
.mw-20  { max-width: 20%; }
.mw-25  { max-width: 25%; }

.mw-30  { max-width: 30%; }
.mw-40  { max-width: 40%; }
.mw-50  { max-width: 50%; }

.mw-60  { max-width: 60%; }
.mw-70  { max-width: 70%; }
.mw-75  { max-width: 75%; }

.mw-80  { max-width: 80%; }
.mw-90  { max-width: 90%; }
.mw-100 { max-width: 100%; }

.w-120 {
  width:120px !important;
}

.w-150 {
  width:150px !important;
}

.w-180 {
  width:180px !important;
}

/* PRIMARY */
.tms-tab-primary {
  border: none;
  background: #fff;
  color: #0d6efd;
  padding: 6px 14px;
  border-radius: 6px;
  font-weight: 600;
  box-shadow: inset 0 0 0 1px #cbced1;
}

.tms-tab-primary.active {
  background: #0d6efd;
  color: #fff;
}

.tms-tab-primary.active .badge {
  background: #fff !important;
  color: #0d6efd !important;
}


/* SECONDARY */
.tms-tab-secondary {
  border: none;
  background: #fff;
  color: #6c757d;
  padding: 6px 14px;
  border-radius: 6px;
  font-weight: 600;
  box-shadow: inset 0 0 0 1px #cbced1;
}

.tms-tab-secondary.active {
  background: #6c757d;
  color: #fff;
}

.tms-tab-secondary.active .badge {
  background: #fff !important;
  color: #6c757d !important;
}


/* SUCCESS */
.tms-tab-success {
  border: none;
  background: #fff;
  color: #198754;
  padding: 6px 14px;
  border-radius: 6px;
  font-weight: 600;
  box-shadow: inset 0 0 0 1px #cbced1;
}

.tms-tab-success.active {
  background: #198754;
  color: #fff;
}

.tms-tab-success.active .badge {
  background: #fff !important;
  color: #198754 !important;
}


/* DANGER */
.tms-tab-danger {
  border: none;
  background: #fff;
  color: #dc3545;
  padding: 6px 14px;
  border-radius: 6px;
  font-weight: 600;
  box-shadow: inset 0 0 0 1px #cbced1;
}

.tms-tab-danger.active {
  background: #dc3545;
  color: #fff;
}

.tms-tab-danger.active .badge {
  background: #fff !important;
  color: #dc3545 !important;
}


/* WARNING */
.tms-tab-warning {
  border: none;
  background: #fff;
  color: #ffc107;
  padding: 6px 14px;
  border-radius: 6px;
  font-weight: 600;
  box-shadow: inset 0 0 0 1px #cbced1;
}

.tms-tab-warning.active {
  background: #ffc107;
  color: #212529;
}

.tms-tab-warning.active .badge {
  background: #fff !important;
  color: #ffc107 !important;
}


/* INFO */
.tms-tab-info {
  border: none;
  background: #fff;
  color: #0dcaf0;
  padding: 6px 14px;
  border-radius: 6px;
  font-weight: 600;
  box-shadow: inset 0 0 0 1px #cbced1;
}

.tms-tab-info.active {
  background: #0dcaf0;
  color: #fff;
}

.tms-tab-info.active .badge {
  background: #fff !important;
  color: #0dcaf0 !important;
}


/* LIGHT */
.tms-tab-light {
  border: none;
  background: #fff;
  color: #6c757d;
  padding: 6px 14px;
  border-radius: 6px;
  font-weight: 600;
  box-shadow: inset 0 0 0 1px #dee2e6;
}

.tms-tab-light.active {
  background: #f8f9fa;
  color: #212529;
}

.tms-tab-light.active .badge {
  background: #fff !important;
  color: #6c757d !important;
}


/* DARK */
.tms-tab-dark {
  border: none;
  background: #fff;
  color: #212529;
  padding: 6px 14px;
  border-radius: 6px;
  font-weight: 600;
  box-shadow: inset 0 0 0 1px #343a40;
}

.tms-tab-dark.active {
  background: #212529;
  color: #fff;
}

.tms-tab-dark.active .badge {
  background: #fff !important;
  color: #212529 !important;
}

.notice-hint {
  padding-left: 8px;
  border-left: 3px solid transparent;
  line-height: 1.4;
}

/* Bình thường */
.notice-normal {
  color: #6c757d;
  border-color: #ced4da;
}

/* Cảnh báo */
.notice-warning {
  color: #ffc107;
  border-color: #ffc107;
  font-weight: 400;
}

/* Nguy hiểm */
.notice-critical {
  color: #dc3545;
  border-color: #dc3545;
  font-weight: 400;
  background: linear-gradient(90deg, rgba(220,53,69,.08), transparent);
}

/* Icon */
.notice-icon {
  font-size: 14px;
}

/* Vi chuyển động – chỉ cho critical */
@keyframes noticePulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.08); opacity: .7; }
  100% { transform: scale(1); opacity: 1; }
}

.notice-critical .notice-icon {
  animation: noticePulse 1.4s infinite;
}

.mt-80px{
  margin-top: 80px !important;
}

/* Mobile only */
@media (max-width: 576px) {
  .tms-dropdown-notification {
    position: fixed !important;
    top: 80px !important;
    right: 10px !important;
  }
}
.stats-header-wrapper {
  position: relative; /* 🔥 mốc để absolute */
}

/* scope dropdown */
.stats-header-wrapper .scope_wrapper {
  position: absolute;
  top: 8px;     /* chỉnh tuỳ header cao/thấp */
  right: 8px;   /* sát mép phải */
  z-index: 5;   /* nổi trên stats */
}

.main-content .border{
  border: 1px solid #eeeeee !important;
}

.dashboard-company-logo{
  display: none !important;
}
.minimenu .dashboard-company-logo{
  display: block !important;
}
/* sticky column */
.sticky-col {
  position: sticky !important;
  left: 0;
  z-index: 2;
  background: #fff !important;
}

/* header cần nổi hơn */
th.sticky-col {
  z-index: 3;
}

/* fix border + shadow cho đẹp */
.left-col {
  box-shadow: 2px 0 5px rgba(0,0,0,0.05);
}

/* fix khi row có màu (table-warning, table-info...) */
.table-warning .sticky-col {
  background-color: #fff3cd;
}
.table-info .sticky-col {
  background-color: #cff4fc;
}
/* container */
.pagination-common-style a {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* item */
.page-link-custom {
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border-radius: 6px;
  border: 1px solid #dee2e6;
  background: #fff;
  color: #333;
  text-decoration: none;
  font-size: 13px;
  transition: all 0.2s;
}

/* hover */
.page-link-custom:hover {
  background: #f1f3f5;
}

/* active */
.page-link-custom.active {
  background: #0d6efd;
  color: #fff;
  border-color: #0d6efd;
}

/* disabled */
.page-link-custom.disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* MOBILE */
@media (max-width: 768px) {

  .page-link-custom {
    min-width: 36px;
    height: 36px;
    font-size: 14px;
  }

  .pagination-common-style {
    justify-content: center !important;
  }

}
.form-switch {
    align-items: center;
    display: flex;
    gap: 2px;
}

/* TEXT ONLY */

.money-level-negative {
  color: #dc3545 !important;
}

.money-level-zero {
  color: #6c757d !important;
}

.money-level-xs {
  color: #198754 !important;
}

.money-level-sm {
  color: #157347 !important;
}

.money-level-md {
  color: #0d6efd !important;
}

.money-level-lg {
  color: #fd7e14 !important;
  font-weight: 600;
}

.money-level-xl {
  color: #d63384 !important;
  font-weight: 700;
}

.money-level-xxl {
  color: #6f42c1 !important;
  font-weight: 700;
}

.money-level-mega {
  color: #b58900 !important;
  font-weight: 800;
}


/* BACKGROUND */

.money-level-negative-bg {
  background: #ffe5e5;
}

.money-level-zero-bg {
  background: #f1f3f5;
}

.money-level-xs-bg {
  background: #eefaf1;
}

.money-level-sm-bg {
  background: #dff7e8;
}

.money-level-md-bg {
  background: #e7f1ff;
}

.money-level-lg-bg {
  background: #fff3cd;
}

.money-level-xl-bg {
  background: #ffe8f0;
}

.money-level-xxl-bg {
  background: #f3e8ff;
}

.money-level-mega-bg {
  background: #fff5cc;
}
.tms-heatmap{
    width:100%;
}

.heatmap-grid{
    display:grid;
    gap:12px;
}

.heatmap-card{
    border:1px solid #dee2e6;
    border-radius:6px;
    padding:8px;
}

.heatmap-header{
    display:flex;
    overflow-x:auto;
    margin-bottom:2px;
}

.heatmap-label{
    min-width:20px;
    font-size:10px;
    text-align:center;
    color:#6c757d;
}

.heatmap-row{
    display:flex;
    overflow-x:auto;
}

.heatmap-cell{
    border:1px solid #fff;
    cursor:pointer;
}

.heatmap-cell:hover{
    opacity:0.8;
}

.heatmap-legend-color{
    width:14px;
    height:14px;
    border-radius:3px;
    display:inline-block;
}