#splash-screen {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-family: Helvetica, 'sans-serif';
  background-color: #f2f3f8;
  color: #5E6278;
  line-height: 1;
  font-size: 14px;
  font-weight: 400;
}

/* Khi splash còn hiển thị, không để layout ứng dụng phía sau tạo scrollbar.
   LayoutProvider sẽ loại bỏ class page-loading sau khi khởi tạo xong. */
body.page-loading {
  overflow: hidden !important;
}

/* LayoutProvider có thể xóa page-loading trước khi splash được ẩn. Dựa trực tiếp
   vào trạng thái của splash để không xuất hiện scrollbar trong khoảng chuyển tiếp. */
html:has(#splash-screen:not(.hidden)),
body:has(#splash-screen:not(.hidden)) {
  overflow: hidden !important;
}

#splash-screen span {
  color: #5E6278;
  transition: none !important;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}
[data-theme="dark"] #splash-screen {
  background-color: #151521;
  color: #92929F;
}

[data-theme="dark"] #splash-screen span {
  color: #92929F;
}

.oct-loader {
  color: var(--kt-primary);
  width: 4px;
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: 19px 0 0 7px, 38px 0 0 3px, 57px 0 0 0;
  transform: translateX(-38px);
  animation: l21 .5s infinite alternate linear;
  margin-bottom: 10px;
}

@keyframes l21 {
  50%  {box-shadow: 19px 0 0 3px, 38px 0 0 7px, 57px 0 0 3px}
  100% {box-shadow: 19px 0 0 0  , 38px 0 0 3px, 57px 0 0 7px}
}