/* ============================================================
   ATOSY ERP — SVOA MENU V3
   SINGLE SOURCE OF TRUTH

   S = Blue
   V = Purple
   O = Green
   A = Orange
   ============================================================ */


/* ------------------------------------------------------------
   TRANSITION
   ------------------------------------------------------------ */

.atosy-svoa-parent {
  transition:
    background .16s ease,
    border-color .16s ease,
    box-shadow .16s ease,
    transform .16s ease !important;

  cursor: pointer;
}


/* ------------------------------------------------------------
   DEFAULT PARENT
   ------------------------------------------------------------ */

.atosy-svoa-parent {
  background:
    linear-gradient(
      145deg,
      rgba(40,72,126,.48),
      rgba(18,44,94,.58)
    ) !important;

  border:
    1px solid rgba(150,190,240,.18) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 8px 20px rgba(0,15,48,.10) !important;

  transform: none !important;
}


/* ------------------------------------------------------------
   S — BLUE
   ------------------------------------------------------------ */

.atosy-svoa-parent[data-atosy-group="s"]:hover,
.atosy-svoa-parent[data-atosy-group="s"].is-atosy-hover {

  background:
    linear-gradient(
      145deg,
      rgba(42,106,190,.72),
      rgba(20,61,128,.72)
    ) !important;

  border-color:
    rgba(87,170,255,.84) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.15),
    0 0 0 1px rgba(54,146,255,.12),
    0 13px 30px rgba(47,140,255,.30) !important;

  transform:
    translateY(-2px) !important;
}


/* ------------------------------------------------------------
   V — PURPLE
   ------------------------------------------------------------ */

.atosy-svoa-parent[data-atosy-group="v"]:hover,
.atosy-svoa-parent[data-atosy-group="v"].is-atosy-hover {

  background:
    linear-gradient(
      145deg,
      rgba(112,72,188,.78),
      rgba(61,40,137,.78)
    ) !important;

  border-color:
    rgba(196,137,255,.88) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 0 0 1px rgba(158,94,255,.15),
    0 13px 32px rgba(145,82,255,.35) !important;

  transform:
    translateY(-2px) !important;
}


/* ------------------------------------------------------------
   O — GREEN
   ------------------------------------------------------------ */

.atosy-svoa-parent[data-atosy-group="o"]:hover,
.atosy-svoa-parent[data-atosy-group="o"].is-atosy-hover {

  background:
    linear-gradient(
      145deg,
      rgba(25,114,107,.72),
      rgba(16,70,101,.73)
    ) !important;

  border-color:
    rgba(82,231,171,.84) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.15),
    0 0 0 1px rgba(40,211,143,.13),
    0 13px 30px rgba(35,207,139,.30) !important;

  transform:
    translateY(-2px) !important;
}


/* ------------------------------------------------------------
   A — ORANGE
   ------------------------------------------------------------ */

.atosy-svoa-parent[data-atosy-group="a"]:hover,
.atosy-svoa-parent[data-atosy-group="a"].is-atosy-hover {

  background:
    linear-gradient(
      145deg,
      rgba(133,79,91,.72),
      rgba(53,48,109,.74)
    ) !important;

  border-color:
    rgba(255,171,112,.86) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.15),
    0 0 0 1px rgba(255,139,82,.13),
    0 13px 30px rgba(255,128,73,.30) !important;

  transform:
    translateY(-2px) !important;
}


/* ============================================================
   SUBMENU
   ============================================================ */

.atosy-svoa-child {

  transition:
    background .14s ease,
    border-color .14s ease,
    box-shadow .14s ease,
    transform .14s ease !important;

  cursor: pointer;

  background:
    linear-gradient(
      145deg,
      rgba(54,91,151,.43),
      rgba(34,66,121,.48)
    ) !important;

  border:
    1px solid rgba(151,190,241,.21) !important;

  color:
    rgba(255,255,255,.95) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06) !important;
}


/* S child */

.atosy-svoa-child[data-atosy-child-group="s"]:hover {

  background:
    linear-gradient(
      135deg,
      #3798ff,
      #2877f4
    ) !important;

  border-color:
    rgba(130,196,255,.78) !important;

  box-shadow:
    0 7px 18px rgba(47,140,255,.27) !important;

  transform:
    translateY(-1px) !important;
}


/* V child */

.atosy-svoa-child[data-atosy-child-group="v"]:hover {

  background:
    linear-gradient(
      135deg,
      #9b62ff,
      #7542ed
    ) !important;

  border-color:
    rgba(204,159,255,.80) !important;

  box-shadow:
    0 7px 20px rgba(145,82,255,.30) !important;

  transform:
    translateY(-1px) !important;
}


/* O child */

.atosy-svoa-child[data-atosy-child-group="o"]:hover {

  background:
    linear-gradient(
      135deg,
      #27d596,
      #16b77b
    ) !important;

  border-color:
    rgba(129,242,196,.76) !important;

  box-shadow:
    0 7px 18px rgba(35,207,139,.27) !important;

  transform:
    translateY(-1px) !important;
}


/* A child */

.atosy-svoa-child[data-atosy-child-group="a"]:hover {

  background:
    linear-gradient(
      135deg,
      #ff9b59,
      #ff7151
    ) !important;

  border-color:
    rgba(255,198,153,.78) !important;

  box-shadow:
    0 7px 18px rgba(255,128,73,.27) !important;

  transform:
    translateY(-1px) !important;
}



/* ============================================================
   ATOSY SVOA V4 SUBMENU
   ============================================================ */

.atosy-svoa-submenu-v4 {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}


.atosy-svoa-submenu-title {
  color: rgba(196,214,244,.82);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
}


.atosy-svoa-submenu-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}


.atosy-svoa-child {
  appearance: none;
  outline: none;
  cursor: pointer;

  min-height: 40px;
  padding: 0 18px;

  border-radius: 999px;

  color: #fff;

  font: inherit;
  font-weight: 700;

  background:
    linear-gradient(
      145deg,
      rgba(59,95,155,.46),
      rgba(35,67,124,.50)
    ) !important;

  border:
    1px solid rgba(154,194,244,.24) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07);

  transition:
    .15s ease;
}


/* S */

.atosy-svoa-child[data-atosy-child-group="s"]:hover {
  background:
    linear-gradient(
      135deg,
      #3798ff,
      #2877f4
    ) !important;

  border-color:
    rgba(130,196,255,.78) !important;

  box-shadow:
    0 7px 18px rgba(47,140,255,.27) !important;
}


/* V */

.atosy-svoa-child[data-atosy-child-group="v"]:hover {
  background:
    linear-gradient(
      135deg,
      #9b62ff,
      #7542ed
    ) !important;

  border-color:
    rgba(204,159,255,.80) !important;

  box-shadow:
    0 7px 20px rgba(145,82,255,.30) !important;
}


/* O */

.atosy-svoa-child[data-atosy-child-group="o"]:hover {
  background:
    linear-gradient(
      135deg,
      #27d596,
      #16b77b
    ) !important;

  border-color:
    rgba(129,242,196,.76) !important;

  box-shadow:
    0 7px 18px rgba(35,207,139,.27) !important;
}


/* A */

.atosy-svoa-child[data-atosy-child-group="a"]:hover {
  background:
    linear-gradient(
      135deg,
      #ff9b59,
      #ff7151
    ) !important;

  border-color:
    rgba(255,198,153,.78) !important;

  box-shadow:
    0 7px 18px rgba(255,128,73,.27) !important;
}



/* ============================================================
   ATOSY ERP — SVOA SAFE SUBMENU HOST V5
   ============================================================ */

#atosy-svoa-submenu-host {

  width: 100%;

  margin-top: 12px;

  position: relative;

  z-index: 5;
}


.atosy-svoa-submenu-panel {

  width: 100%;

  box-sizing: border-box;

  padding:
    12px 16px 14px;

  border-radius:
    18px;

  background:
    linear-gradient(
      145deg,
      rgba(35,72,128,.42),
      rgba(18,48,98,.56)
    );

  border:
    1px solid rgba(145,190,240,.16);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 10px 25px rgba(0,18,55,.12);

  backdrop-filter:
    blur(18px);

  -webkit-backdrop-filter:
    blur(18px);
}


.atosy-svoa-submenu-label {

  margin-bottom:
    8px;

  color:
    rgba(199,216,243,.78);

  font-size:
    12px;

  font-weight:
    800;

  letter-spacing:
    .08em;
}


.atosy-svoa-submenu-buttons {

  display:
    flex;

  flex-wrap:
    wrap;

  align-items:
    center;

  gap:
    8px;
}


.atosy-svoa-child {

  min-height:
    38px;

  padding:
    0 16px;

  border-radius:
    999px;

  appearance:
    none;

  outline:
    none;

  font:
    inherit;

  font-size:
    14px;

  font-weight:
    750;

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

  cursor:
    pointer;

  background:
    linear-gradient(
      145deg,
      rgba(57,94,156,.46),
      rgba(36,68,124,.50)
    ) !important;

  border:
    1px solid rgba(153,193,242,.22) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07);

  transition:
    transform .14s ease,
    background .14s ease,
    border-color .14s ease,
    box-shadow .14s ease;
}


/* S */

.atosy-svoa-child[data-atosy-child-group="s"]:hover {

  background:
    linear-gradient(
      135deg,
      #3899ff,
      #2877f4
    ) !important;

  border-color:
    rgba(128,195,255,.76) !important;

  box-shadow:
    0 7px 18px rgba(47,140,255,.25) !important;

  transform:
    translateY(-1px);
}


/* V */

.atosy-svoa-child[data-atosy-child-group="v"]:hover {

  background:
    linear-gradient(
      135deg,
      #9c63ff,
      #7542ed
    ) !important;

  border-color:
    rgba(203,158,255,.80) !important;

  box-shadow:
    0 7px 20px rgba(145,82,255,.28) !important;

  transform:
    translateY(-1px);
}


/* O */

.atosy-svoa-child[data-atosy-child-group="o"]:hover {

  background:
    linear-gradient(
      135deg,
      #27d596,
      #16b77b
    ) !important;

  border-color:
    rgba(128,241,195,.76) !important;

  box-shadow:
    0 7px 18px rgba(35,207,139,.25) !important;

  transform:
    translateY(-1px);
}


/* A */

.atosy-svoa-child[data-atosy-child-group="a"]:hover {

  background:
    linear-gradient(
      135deg,
      #ff9b59,
      #ff7151
    ) !important;

  border-color:
    rgba(255,198,153,.78) !important;

  box-shadow:
    0 7px 18px rgba(255,128,73,.25) !important;

  transform:
    translateY(-1px);
}





/* ============================================================
   ATOSY ERP — SVOA SINGLE CONTROLLER
   ============================================================ */

#atosy-svoa-single-submenu {
  position: relative !important;

  width: calc(100% - 32px) !important;

  margin:
    10px
    16px
    14px !important;

  padding:
    14px
    18px
    16px !important;

  border-radius: 20px !important;

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, .080),
      rgba(255, 255, 255, .035)
    ) !important;

  border:
    1px solid
    rgba(255, 255, 255, .14) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    0 18px 45px rgba(0, 19, 65, .18) !important;

  backdrop-filter:
    blur(24px)
    saturate(145%) !important;

  -webkit-backdrop-filter:
    blur(24px)
    saturate(145%) !important;

  box-sizing: border-box !important;
}


.atosy-svoa-single-title {
  margin-bottom: 10px !important;

  color:
    rgba(220, 232, 255, .72) !important;

  font-size: 13px !important;
  font-weight: 800 !important;

  letter-spacing: .075em !important;

  text-transform: uppercase !important;
}


.atosy-svoa-single-items {
  display: flex !important;

  align-items: center !important;

  flex-wrap: wrap !important;

  gap: 9px !important;
}


.atosy-svoa-single-item {
  appearance: none !important;

  min-height: 38px !important;

  padding:
    8px
    17px !important;

  border-radius: 999px !important;

  border:
    1px solid
    rgba(129, 184, 255, .34) !important;

  background:
    linear-gradient(
      180deg,
      rgba(70, 133, 228, .23),
      rgba(30, 77, 151, .20)
    ) !important;

  color: #fff !important;

  font: inherit !important;

  font-size: 14px !important;

  font-weight: 750 !important;

  cursor: pointer !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08) !important;

  transition:
    transform .16s ease,
    border-color .16s ease,
    background .16s ease,
    box-shadow .16s ease !important;
}


.atosy-svoa-single-item:hover {
  transform:
    translateY(-1px)
    scale(1.025) !important;

  border-color:
    var(--svoa-accent) !important;

  background:
    color-mix(
      in srgb,
      var(--svoa-accent) 24%,
      rgba(24, 65, 135, .42)
    ) !important;

  box-shadow:
    0 0 0 1px
      color-mix(
        in srgb,
        var(--svoa-accent) 45%,
        transparent
      ),

    0 7px 25px
      var(--svoa-glow),

    inset 0 1px 0
      rgba(255,255,255,.16) !important;
}


/*
 * Top S/V/O/A:
 * keep dark glass body.
 * Accent only via border/glow — not full solid fill.
 */

.atosy-svoa-card-active {
  border-color:
    var(--svoa-card-accent)
    !important;

  box-shadow:
    0 0 0 1px
      color-mix(
        in srgb,
        var(--svoa-card-accent) 54%,
        transparent
      ),

    0 0 27px
      var(--svoa-card-glow),

    inset 0 1px 0
      rgba(255,255,255,.10)
    !important;
}


/*
 * Hover remains in the correct S/V/O/A family,
 * but must NOT paint the whole card solid.
 */

.atosy-svoa-card-active:hover {
  transform:
    translateY(-2px) !important;
}


/*
 * Legacy menus generated by navigation.js
 */

[data-atosy-legacy-submenu="1"] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}



/* ============================================================
   ATOSY SVOA — HOVER OVERRIDES CLICK
   Only one card appears active at a time.
   ============================================================ */

.atosy-svoa-card-active {
  position: relative !important;
  transform: translateY(-1px) !important;
  transition:
    transform .17s ease,
    border-color .17s ease,
    box-shadow .17s ease,
    background .17s ease !important;
}


.atosy-svoa-card-hover {
  border-color:
    var(--svoa-card-accent) !important;

  box-shadow:
    0 0 0 1px
      color-mix(
        in srgb,
        var(--svoa-card-accent) 60%,
        transparent
      ),

    0 0 26px
      var(--svoa-card-glow),

    inset 0 1px 0
      rgba(255,255,255,.12)
    !important;
}


.atosy-svoa-card-selected:not(.atosy-svoa-card-hover) {
  border-color:
    color-mix(
      in srgb,
      var(--svoa-card-accent) 68%,
      rgba(255,255,255,.18)
    ) !important;

  box-shadow:
    0 0 0 1px
      color-mix(
        in srgb,
        var(--svoa-card-accent) 35%,
        transparent
      ),

    0 0 18px
      color-mix(
        in srgb,
        var(--svoa-card-glow) 60%,
        transparent
      )
    !important;
}


/*
 * Explicit reset for cards that are NOT current.
 * Prevent old :focus / :active / selected classes from
 * leaving another SVOA card visually lit.
 */

#atosy-svoa-single-submenu ~ * {
  box-sizing: border-box;
}



/* ============================================================
   SVOA — HOVER ONLY / NO PERSISTENT CLICK STATE
   ============================================================ */

.atosy-svoa-card-selected,
[data-svoa-selected="1"],
[data-selected="true"],
[aria-selected="true"] {
  box-shadow: none !important;
}

/* Hover thật sự */
.atosy-svoa-card-hover {
  transform: translateY(-2px) !important;

  border-color:
    var(--svoa-card-accent) !important;

  box-shadow:
    0 0 0 1px var(--svoa-card-accent),
    0 0 24px var(--svoa-card-glow),
    inset 0 1px 0 rgba(255,255,255,.15)
    !important;

  transition:
    transform .16s ease,
    border-color .16s ease,
    box-shadow .16s ease,
    filter .16s ease !important;
}


/* Click chỉ nảy nhẹ */
.atosy-svoa-card-pressed {
  transform:
    translateY(-1px)
    scale(.985) !important;

  filter:
    brightness(1.12)
    saturate(1.08) !important;

  box-shadow:
    0 0 0 1px var(--svoa-card-accent),
    0 0 16px var(--svoa-card-glow)
    !important;

  transition:
    transform .08s ease,
    filter .08s ease,
    box-shadow .08s ease !important;
}


/* Khi không hover thì tuyệt đối không giữ trạng thái sáng cũ */
:not(.atosy-svoa-card-hover).atosy-svoa-card-active {
  box-shadow: none !important;
}


/* loại bỏ focus/click persistence của browser */
.atosy-svoa-card-active:focus,
.atosy-svoa-card-active:focus-visible,
.atosy-svoa-card-active:active {
  outline: none !important;
}



/* ============================================================
   SVOA SUBMENU — CLICK MICRO INTERACTION
   Không sticky selected
   ============================================================ */

.atosy-svoa-single-item {
  cursor: pointer !important;

  transition:
    transform .14s cubic-bezier(.2,.8,.2,1),
    filter .14s ease,
    box-shadow .14s ease,
    background .14s ease,
    border-color .14s ease !important;
}


.atosy-svoa-single-item:active,
.atosy-svoa-single-item.atosy-svoa-submenu-pressed {
  transform:
    translateY(1px)
    scale(.975) !important;

  filter:
    brightness(1.14)
    saturate(1.08) !important;
}


/* Không để browser giữ focus xấu sau click */
.atosy-svoa-single-item:focus {
  outline: none !important;
}


.atosy-svoa-single-item:focus-visible {
  outline:
    2px solid rgba(255,255,255,.65) !important;

  outline-offset: 2px;
}