/* ================================================================
   20週年抽好禮 - 主選單新增項目
   （改為靜態定位，避免套用到 .active/:hover 通用效果時因為
   auto 寬度造成版面跑掉；.active 狀態固定維持綠色，但仍保留手指游標；
   可點擊區域僅包住文字本身，避免游標在文字外圍仍顯示手指）
   ================================================================ */
a.top-menu-item.forAnniv20 {
  width: 172px;
  white-space: nowrap;
  cursor: pointer;
}
a.top-menu-item.forAnniv20 span.a-txt {
  z-index: 2;
  color: #131637;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
a.top-menu-item.forAnniv20 span.a-txt:before {
  content: attr(data-zh-beforehover);
}
/* 跟其他選單的光暈同一套做法（模糊+跑馬燈漸層色塊），
   差別是這顆按鈕的光暈常駐顯示，不需要 hover 才出現 */
a.top-menu-item.forAnniv20 span.a-bg {
  display: block !important;
  position: absolute;
  z-index: 1;
  top: 17px;
  left: 50%;
  transform: translateX(-50%);
  width: 150px;
  height: 20px;
  -webkit-filter: blur(16px);
  filter: blur(16px);
  backdrop-filter: blur(16px);
  overflow: hidden;
  pointer-events: none;
}
a.top-menu-item.forAnniv20 span.a-bg:after {
  position: absolute;
  content: "";
  display: block;
  top: 0;
  left: 0;
  width: 2000px;
  height: 100%;
  background: linear-gradient(45deg, #07f0b7 0%, #00c8ff 10%, #91f335 20%, #00c8ff 30%, #91f335 40%, #00c8ff 50%, #07f0b7 60%, #00c8ff 70%, #91f335 80%, #00c8ff 90%);
  -webkit-animation: animate_bg 8s infinite linear;
  animation: animate_bg 8s infinite linear;
}

/* 滑鼠移入：光暈移除、文字變成 #00E6B1；在「20週年抽好禮！」本身的頁面
   （.active）也套用同一套樣式，跟其他頁面完全一致，不特別鎖綠色 */
a.top-menu-item.forAnniv20:hover span.a-bg {
  display: none !important;
}
a.top-menu-item.forAnniv20:hover span.a-txt,
a.top-menu-item.forAnniv20:hover span.a-txt:before {
  color: #00E6B1;
  content: attr(data-zh-beforehover);
}

header.sticky a.top-menu-item.forAnniv20 {
  width: 172px;
  height: 30px;
  line-height: 30px;
}
header.sticky a.top-menu-item.forAnniv20 span.a-txt,
header.sticky a.top-menu-item.forAnniv20 span.a-txt:before {
  color: #131637;
}
/* 置頂縮小狀態下，光暈要用跟一般狀態一樣的「置中」做法（left:50%+translateX），
   避免被通用的 header.sticky a.top-menu-item span.a-bg（left:10px 固定偏移，
   是為 120px 寬的一般選單設計的）蓋掉，導致光暈跑版。 */
header.sticky a.top-menu-item.forAnniv20 span.a-bg {
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 130px;
  height: 10px;
  -webkit-filter: blur(12px);
  filter: blur(12px);
  backdrop-filter: blur(12px);
  overflow: hidden;
}

/* 「聯絡我們」hover/active 時會用 filter:blur() 產生光暈，
   blur 的視覺範圍不受該元素自身 overflow 限制，會超出邊界
   蓋到緊接在後的「20週年抽好禮！」。加上 overflow:hidden
   把光暈裁切在按鈕自己的框內。 */
a.top-menu-item.forContact {
  overflow: hidden;
}
a.top-menu-item.forContact:hover span.a-bg,
a.top-menu-item.forContact.active span.a-bg {
  width: 130px;
}

@media (max-width: 980px) {
  a.top-menu-item.forAnniv20 {
    width: 100%;
    margin-left: 0;
  }
  /* 手機版選單是直向排列的清單，這顆按鈕的光暈原本用桌機版的置中座標
     (left:50%+top:17px) 定位，套到直向清單裡會變成一坨光暈飄在選單
     清單的某個位置，跟文字對不上、看起來很奇怪。手機版選單不需要
     光暈，直接關閉。 */
  a.top-menu-item.forAnniv20 span.a-bg {
    display: none !important;
  }
  a.top-menu-item.forAnniv20 span.a-txt {
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
  }
  a.top-menu-item.forAnniv20:hover span.a-txt,
  a.top-menu-item.forAnniv20.active span.a-txt {
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
  }
  a.top-menu-item.forAnniv20:hover span.a-bg {
    display: none !important;
  }
  a.top-menu-item.forAnniv20:hover span.a-txt,
  a.top-menu-item.forAnniv20:hover span.a-txt:before {
    color: #00E6B1;
  }
}