/* Shared customer-page loading appearance, based on /xem-nhanh/.
   Existing controllers retain ownership of visibility and request lifecycles. */
:root {
  --tt-qo-shade: rgba(5, 11, 22, .933);
  --tt-qo-text: #f3f7f9;
  --tt-qo-muted: #9dabb5;
  --tt-qo-track: #213240;
  --tt-qo-accent: #76debe;
}
html body :is(#ttPageLoader, #ttSpaLoaderOverlay, #ttAppRegionLoader) {
  box-sizing: border-box !important;
  padding: 16px !important;
  background: var(--tt-qo-shade) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: var(--tt-qo-text) !important;
  font-family: "Segoe UI", Tahoma, sans-serif !important;
  text-align: center !important;
  gap: 0 !important;
  transition: opacity .16s ease, visibility .16s ease !important;
}
/* This path removes its DOM node after 90ms; finish the fade before removal. */
html body #ttAppRegionLoader {
  transition: opacity .08s ease !important;
}
html body :is(#ttPageLoader, #ttSpaLoaderOverlay) :is(.tt-page-loader-inner, .tt-spa-loader-card) {
  position: relative !important;
  inset: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: min(100%, 360px) !important;
  max-width: 100% !important;
  max-height: none !important;
  padding: 0 !important;
  margin: 0 !important;
  gap: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  opacity: 1 !important;
  transition: none !important;
}
html body :is(#ttPageLoader, #ttSpaLoaderOverlay) :is(.tt-page-loader-image-wrap, .tt-spa-loader-logo-wrap) {
  order: 1 !important;
  display: block !important;
  width: min(210px, 48vw, 34vh) !important;
  height: auto !important;
  aspect-ratio: auto !important;
  margin: 0 auto 18px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 18px !important;
  box-shadow: none !important;
  overflow: hidden !important;
}
html body :is(#ttPageLoader, #ttSpaLoaderOverlay) :is(.tt-page-loader-image, .tt-spa-loader-logo) {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 34vh !important;
  margin: 0 !important;
  object-fit: contain !important;
  border-radius: 18px !important;
  border: 0 !important;
  box-shadow: none !important;
}
html body #ttAppRegionLoader > img {
  order: 1 !important;
  display: block !important;
  width: min(210px, 48vw, 34vh) !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 34vh !important;
  margin: 0 auto 18px !important;
  object-fit: contain !important;
  border: 0 !important;
  border-radius: 18px !important;
  box-shadow: none !important;
}
/* Keep the old nodes for the controllers, but do not advertise fake percentages. */
html body :is(#ttPageLoader, #ttSpaLoaderOverlay, #ttAppRegionLoader) :is(.tt-page-loader-percent, .tt-spa-loader-percent, .tt-app-region-percent, .tt-spa-loader-ring) {
  display: none !important;
}
html body :is(#ttPageLoader, #ttSpaLoaderOverlay) :is(.tt-page-loader-status, .tt-spa-loader-text),
html body #ttAppRegionLoader > div:last-child {
  order: 2 !important;
  color: var(--tt-qo-text) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: normal !important;
  text-align: center !important;
  text-shadow: none !important;
  min-height: 0 !important;
  max-width: min(100%, 360px) !important;
  margin: 0 !important;
}
html body :is(#ttPageLoader, #ttSpaLoaderOverlay, #ttAppRegionLoader) :is(.tt-page-loader-bar, .tt-spa-loader-progress, .tt-app-region-progress) {
  order: 3 !important;
  display: block !important;
  flex: 0 0 auto !important;
  width: 208px !important;
  max-width: 70vw !important;
  height: 4px !important;
  margin: 16px auto !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: var(--tt-qo-track) !important;
  box-shadow: none !important;
}
html body :is(#ttPageLoader, #ttSpaLoaderOverlay, #ttAppRegionLoader) :is(.tt-page-loader-bar, .tt-spa-loader-progress, .tt-app-region-progress) > span {
  display: none !important;
}
html body :is(#ttPageLoader, #ttSpaLoaderOverlay, #ttAppRegionLoader) :is(.tt-page-loader-bar, .tt-spa-loader-progress, .tt-app-region-progress)::after {
  content: "";
  display: block;
  width: 35%;
  height: 100%;
  border-radius: inherit;
  background: var(--tt-qo-accent);
  animation: ttQuickOverlayLine 1.2s ease-in-out infinite alternate;
}
html body :is(#ttPageLoader, #ttSpaLoaderOverlay) :is(.tt-page-loader-inner, .tt-spa-loader-card)::after,
html body #ttAppRegionLoader::after {
  content: "Trang hi\1ec3n th\1ecb  ngay khi s\1eb5n s\e0ng.";
  order: 4;
  display: block;
  color: var(--tt-qo-muted);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  max-width: 100%;
  margin: 0;
}
/* Override the old body > #ttPageLoader rule that made a finished loader opaque. */
html body #ttPageLoader.tt-page-loader.is-finished {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
/* No zoom, blur, or vertical bounce of the page underneath the overlay. */
html body #ttSpaContent,
html body #ttSpaContent:is(.tt-spa-leave-detail, .tt-spa-leave-list, .tt-spa-leave-page, .tt-spa-enter-detail, .tt-spa-enter-list, .tt-spa-enter-page) {
  animation: none !important;
  transform: none !important;
  filter: none !important;
  will-change: auto !important;
}
/* Match non-modal indicators without adding a new blocking overlay. */
html body #ttSpaLoadingBar {
  background: var(--tt-qo-accent) !important;
  box-shadow: none !important;
}
html body #ttSpaLoadingBar.show {
  width: 100% !important;
  transform-origin: left center;
  animation: ttQuickOverlayTop 1.2s ease-in-out infinite alternate !important;
}
html body .tt-customer-list-loading {
  color: var(--tt-qo-text);
}
html body .tt-customer-list-loading::after {
  content: "";
  display: block;
  width: 208px;
  max-width: 70vw;
  height: 4px;
  margin: 16px auto 0;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--tt-qo-accent), var(--tt-qo-accent)) 0 0 / 35% 100% no-repeat var(--tt-qo-track);
  animation: ttQuickOverlayInline 1.2s ease-in-out infinite alternate;
}
@keyframes ttQuickOverlayLine { from { transform: translateX(0); } to { transform: translateX(186%); } }
@keyframes ttQuickOverlayTop { from { transform: scaleX(.18); } to { transform: scaleX(.92); } }
@keyframes ttQuickOverlayInline { from { background-position: 0 0; } to { background-position: 100% 0; } }
@media (max-height: 420px) {
  html body :is(#ttPageLoader, #ttSpaLoaderOverlay, #ttAppRegionLoader) { padding: 10px !important; }
  html body :is(#ttPageLoader, #ttSpaLoaderOverlay) :is(.tt-page-loader-image-wrap, .tt-spa-loader-logo-wrap),
  html body #ttAppRegionLoader > img { margin-bottom: 10px !important; }
}
@media (prefers-reduced-motion: reduce) {
  html body :is(#ttPageLoader, #ttSpaLoaderOverlay, #ttAppRegionLoader) { transition: none !important; }
  html body :is(#ttPageLoader, #ttSpaLoaderOverlay, #ttAppRegionLoader) :is(.tt-page-loader-bar, .tt-spa-loader-progress, .tt-app-region-progress)::after,
  html body #ttSpaLoadingBar.show,
  html body .tt-customer-list-loading::after { animation: none !important; }
}

/* Beat the page-level critical loader background without changing visibility. */
html body #ttPageLoader.tt-page-loader {
  background: var(--tt-qo-shade) !important;
}