/* =========================================================
   ATOSY ERP
   LIQUID TOP NAVIGATION
   Dashboard | SVOA | Learning
   ========================================================= */

.app-header {
  position: relative;
  z-index: 1000;
}

.top-navigation {
  position: relative;

  display: flex;
  align-items: center;

  gap: 8px;

  padding: 6px;

  border-radius: 999px;

  background:
    linear-gradient(
      145deg,
      rgba(6, 51, 120, .72),
      rgba(4, 33, 87, .66)
    );

  border:
    1px solid rgba(128, 190, 255, .24);

  backdrop-filter:
    blur(24px)
    saturate(170%);

  -webkit-backdrop-filter:
    blur(24px)
    saturate(170%);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.13),
    0 12px 32px rgba(0,26,83,.18);
}

.atosy-main-nav-button {
  position: relative;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 8px;

  min-height: 44px;

  padding: 0 18px;

  border: 0;

  border-radius: 999px;

  background: transparent;

  color: rgba(255,255,255,.88);

  font-size: 14px;
  font-weight: 750;

  cursor: pointer;

  transition:
    transform 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
}

.atosy-main-nav-button:hover {
  background: rgba(255,255,255,.08);
}

.atosy-main-nav-button.is-active {
  color: #fff;

  background:
    linear-gradient(
      135deg,
      #168bff,
      #3263ff
    );

  box-shadow:
    0 9px 25px rgba(20,105,255,.34),
    inset 0 1px 0 rgba(255,255,255,.30);
}

.atosy-main-nav-icon {
  font-size: 17px;
}


/* =========================================================
   SVOA POPOVER
   ========================================================= */

.atosy-svoa-popover {
  position: absolute;

  top: calc(100% + 10px);
  left: 50%;

  width: min(720px, calc(100vw - 40px));

  transform:
    translateX(-50%)
    translateY(-8px);

  padding: 14px;

  border-radius: 24px;

  background:
    linear-gradient(
      145deg,
      rgba(5,44,105,.94),
      rgba(4,29,76,.92)
    );

  border:
    1px solid rgba(117,188,255,.30);

  backdrop-filter:
    blur(30px)
    saturate(175%);

  -webkit-backdrop-filter:
    blur(30px)
    saturate(175%);

  box-shadow:
    0 22px 60px rgba(0,18,65,.36),
    inset 0 1px 0 rgba(255,255,255,.14);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition:
    opacity 150ms ease,
    transform 150ms ease,
    visibility 150ms ease;
}

.atosy-svoa-popover.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;

  transform:
    translateX(-50%)
    translateY(0);
}

.svoa-primary-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);

  gap: 10px;
}

.svoa-primary-card {
  position: relative;

  min-height: 82px;

  display: flex;
  align-items: center;

  gap: 12px;

  padding: 12px;

  border: 1px solid rgba(255,255,255,.12);

  border-radius: 19px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.09),
      rgba(255,255,255,.04)
    );

  color: #fff;

  cursor: pointer;

  transition:
    transform 160ms ease,
    border-color 160ms ease,
    background 160ms ease;
}

.svoa-primary-card:hover,
.svoa-primary-card.is-active {
  transform: translateY(-2px);

  border-color:
    color-mix(
      in srgb,
      var(--svoa-color) 70%,
      white
    );

  background:
    linear-gradient(
      145deg,
      color-mix(
        in srgb,
        var(--svoa-color) 24%,
        rgba(255,255,255,.08)
      ),
      rgba(255,255,255,.04)
    );
}

.svoa-primary-card.s {
  --svoa-color: #1687ff;
}

.svoa-primary-card.v {
  --svoa-color: #8757ff;
}

.svoa-primary-card.o {
  --svoa-color: #1ecf8b;
}

.svoa-primary-card.a {
  --svoa-color: #ff884d;
}

.svoa-card-badge {
  width: 42px;
  height: 42px;

  min-width: 42px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 15px;

  background:
    radial-gradient(
      circle at 30% 22%,
      rgba(255,255,255,.40),
      transparent 30%
    ),
    var(--svoa-color);

  box-shadow:
    0 8px 18px
    color-mix(
      in srgb,
      var(--svoa-color) 35%,
      transparent
    );

  color: white;

  font-size: 21px;
  font-weight: 800;
}

.svoa-card-copy strong {
  display: block;

  color: #fff;

  font-size: 14px;
}

.svoa-card-copy span {
  display: block;

  margin-top: 3px;

  color: rgba(255,255,255,.58);

  font-size: 10px;
  line-height: 1.35;
}


/* =========================================================
   CHILD MENU
   ========================================================= */

.svoa-child-menu {
  display: none;

  margin-top: 10px;

  padding: 10px;

  border-radius: 18px;

  background:
    rgba(255,255,255,.055);

  border:
    1px solid rgba(255,255,255,.09);
}

.svoa-child-menu.is-open {
  display: block;
}

.svoa-child-heading {
  margin:
    0 0 8px 4px;

  color:
    rgba(255,255,255,.54);

  font-size: 10px;
  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: .07em;
}

.svoa-child-grid {
  display: flex;
  flex-wrap: wrap;

  gap: 7px;
}

.svoa-child-button {
  display: inline-flex;
  align-items: center;

  gap: 7px;

  padding:
    9px 13px;

  border:
    1px solid rgba(255,255,255,.10);

  border-radius:
    999px;

  background:
    rgba(255,255,255,.06);

  color:
    rgba(255,255,255,.86);

  font-size:
    12px;

  font-weight:
    700;

  cursor:
    pointer;
}

.svoa-child-button:hover,
.svoa-child-button.is-active {
  color: #fff;

  border-color:
    rgba(143,100,255,.75);

  background:
    linear-gradient(
      135deg,
      rgba(129,75,255,.75),
      rgba(92,61,221,.68)
    );

  box-shadow:
    0 7px 18px rgba(108,60,240,.23);
}


/* =========================================================
   HEADER SPACING
   ========================================================= */

.app-main {
  padding-top:
    12px;
}

.hero-section {
  position:
    relative;

  z-index:
    1;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 820px) {

  .svoa-primary-grid {
    grid-template-columns:
      repeat(2, 1fr);
  }

  .atosy-main-nav-button {
    padding:
      0 12px;

    font-size:
      12px;
  }

}


/* ==========================================================
   ATOSY SUBMENU REAL CLICK FEEDBACK
   Chỉ là hiệu ứng nhấn, KHÔNG tạo trạng thái selected cố định
   ========================================================== */

.atosy-submenu-pressed {
  transform: translateY(1px) scale(.985) !important;
  filter: brightness(1.15) !important;
  transition:
    transform 90ms ease,
    filter 90ms ease !important;
}