/*
 * Home hero CTAs — match docs/html/css/scss/base/_button.scss.
 * Loaded after Bootstrap + styles.css. Bootstrap 5.3 uses --bs-btn-*; without this,
 * banner buttons show default blue/cyan instead of brand navy / pale blue.
 */
.page-home .banner-info-button .btn.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #121b71;
  --bs-btn-border-color: #121b71;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #121b71;
  --bs-btn-hover-border-color: #121b71;
  --bs-btn-focus-shadow-rgb: 18, 27, 113;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #121b71;
  --bs-btn-active-border-color: #121b71;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #121b71;
  --bs-btn-disabled-border-color: #121b71;
  background-color: #121b71;
  border-color: #121b71;
  color: #fff;
  box-shadow: 0 0 12px 0 #7dcef8 inset;
}
.page-home .banner-info-button .btn.btn-primary:hover,
.page-home .banner-info-button .btn.btn-primary:focus-visible {
  box-shadow: none;
  background-color: #121b71;
  border-color: #121b71;
  color: #fff;
}
.page-home .banner-info-button .btn.btn-primary .svg path {
  fill: #fff;
}

.page-home .banner-info-button .btn.btn-info {
  --bs-btn-color: #121b71;
  --bs-btn-bg: #dbedf8;
  --bs-btn-border-color: #dbedf8;
  --bs-btn-hover-color: #121b71;
  --bs-btn-hover-bg: #7dcef8;
  --bs-btn-hover-border-color: #7dcef8;
  --bs-btn-focus-shadow-rgb: 18, 27, 113;
  --bs-btn-active-color: #121b71;
  --bs-btn-active-bg: #7dcef8;
  --bs-btn-active-border-color: #7dcef8;
  --bs-btn-disabled-color: #121b71;
  --bs-btn-disabled-bg: #dbedf8;
  --bs-btn-disabled-border-color: #dbedf8;
  background-color: #dbedf8;
  border-color: #dbedf8;
  color: #121b71 !important;
  box-shadow: 0 0 12px 0 #a5d3ee inset;
}
.page-home .banner-info-button .btn.btn-info:hover,
.page-home .banner-info-button .btn.btn-info:focus-visible {
  box-shadow: none;
  background-color: #7dcef8;
  border-color: #7dcef8;
  color: #121b71 !important;
}
.page-home .banner-info-button .btn.btn-info .svg path {
  fill: #121b71;
}

@media (max-width: 1199px) {
  #header .head-menu .gNavi > li > a {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }
}

/* Header products dropdown — Bootstrap focus ring on hover-open looks like blue border */
@media (min-width: 1200px) {
  #header .gNavi > li.hash-menu > .menu-link:focus,
  #header .gNavi > li.hash-menu > .menu-link.show {
    outline: none;
    box-shadow: none;
  }
  #header .gNavi > li.hash-menu > .menu-link:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
  }
}

/* About banner — offset fixed mobile header (64px) */
@media (max-width: 991px) {
  .page-about .banner {
    margin-top: 64px;
  }
}

/* LGSP — solution model thumb on mobile (VI / EN) */
@media (max-width: 991px) {
  html[lang='vi'] .page-lgsp .model-thumb img {
    content: url('/images/data/thumb-model-vi-m.png');
  }
  html[lang='en'] .page-lgsp .model-thumb img {
    content: url('/images/data/thumb-model-en-m.png');
  }
}

/* Full-page route loading (app/loading.tsx, app/[locale]/loading.tsx) */
.page-loading {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%);
}

.loading-spinner {
  position: relative;
  width: 120px;
  height: 120px;
}

.spinner-ring {
  position: absolute;
  inset: 0;
  margin: auto;
  border: 3px solid transparent;
  border-radius: 50%;
  animation: page-loading-spin 1.5s linear infinite;
}

.spinner-ring:nth-child(1) {
  width: 100%;
  height: 100%;
  border-top-color: #00a19a;
}

.spinner-ring:nth-child(2) {
  width: 80%;
  height: 80%;
  border-right-color: #00c4b4;
  animation-direction: reverse;
  animation-delay: 0.15s;
}

.spinner-ring:nth-child(3) {
  width: 60%;
  height: 60%;
  border-bottom-color: #00e5d4;
  animation-delay: 0.3s;
}

.loading-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  transform: translate(-50%, -50%);
  width: 56px;
  height: auto;
  pointer-events: none;
}

@keyframes page-loading-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Contact form error icon — fixed inset, show instantly (no slide) */
.form-control.valid {
  background: url(../images/common/icon-error.svg) no-repeat right 24px center #fff;
  transition: none;
}

/* Header mobile — show logo text (hidden in styles.css below 991px) */
@media (max-width: 991px) {
  #header .logo .logo-text {
    display: block;
  }
}