.top-tabs-container {
  position: sticky;
  top: var(--topnav-height-margin);
  background-color: transparent;
  z-index: 1000;
  padding-left: 0;
  padding-right: 0;
  display: flex;  /* 让内部子元素左右横向排列 */
  align-items: center;
}

/* 2. 添加伪元素作为全屏背景 */
.top-tabs-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  /* 先移动到容器中心 */
  transform: translateX(-50%);
  /* 再通过transform精确地向左移动自身宽度的一半，实现完美居中 */
  width: 100vw;
  /* 使用100vw撑满视口宽度 */
  height: 100%;
  /* 高度与父元素一致 */
  background-color: #334466;
  /* 你想要的背景色 */
  z-index: -1;
  /* 将伪元素置于父元素内容的下方 */
}

/*
  .sticky 类及其相关媒体查询已被移除，
  因为现在使用原生的 position: sticky 实现。
  原生 sticky 会自动处理宽度和占位，简化了大量 CSS。
*/
@media (max-width: 1200px) {
    .top-tabs-container {
        /*
        box-sizing 确保 padding 不会撑大容器。
        */
        box-sizing: border-box;
    }
}


.top-tabs {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
  white-space: nowrap;
  padding-left: 0;
  flex-grow: 1;  /* 占据左侧菜单之外的所有剩余空间 */
  min-width: 0;  /* 防止 flex 子项撑破容器，保证 overflow-x 生效 */
}

.top-tabs::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari and Opera */
}

.top-tabs button {
  display: flex;
  flex: 0 0 auto;
  margin-right: 1em;
  height: 40px;
  line-height: 1.5;
  padding: 0 0.8em;
  cursor: pointer;
  border: none;
  color: #fff;
  background-color: transparent;
  font-family: inherit;
  font-size: var(--font-size-nav);
  font-weight: normal !important;
  transition: color 0.3s, border-bottom 0.3s;
  border-radius: 0;
  position: relative;
  align-items: center;
  justify-content: center;
}

.top-tabs button::after {
  content: '';
  position: absolute;
  left: 0%;
  bottom: 0;
  height: 5px;
  background-color: #FF6D65;
  width: 0;  /*初始为0*/
  transition: width 0.5s ease;
}

.top-tabs button:hover::after {
  width: 100%; /*逐渐增长为100%*/
}

.top-tabs button.active {
  background-color: #FF6D65;
  color: #fff;
}

.top-tabs button a {
  color: inherit;
  text-decoration: none;
  display: flex;
  height: 100%;
  width: 100%;
  align-items: center;
}