#top-sections-container {
  position: relative;
  background-color: transparent;
  z-index: 1;

  background-color: #334466;
  padding-left: 0;
  padding-right: 0;
}

/* 2. 添加伪元素作为全屏背景 */
#top-sections-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 (fixed) 状态时，
  使用 calc() 精确计算伪元素的位置，以实现视口宽度的背景。
*/
#top-sections-container.sticky {
  position: fixed;
  top: var(--topnav-height);
  z-index: 1000;

  /* --- 新增和修改的规则 --- */
  
  /* 1. 使用 transform 让容器自身在视口中居中 */
  left: 50%;
  transform: translateX(-50%);
  
  /* 2. 重新声明其应有的宽度，因为 fixed 元素会失去其父容器的宽度约束 */
  width: var(--xl-main-width);
  max-width: var(--xl-main-max-width);
  
  /* 3. 在移动端宽度可能需要设为100% */
  /* 如果在移动端也有问题，可以包裹在媒体查询里 */
  @media (max-width: 991px) {
    width: 100%;
  }
}

@media (min-width: 992px) and (max-width: 1300px) {
  #top-sections-container.sticky {
    width: var(--md-main-width);
    max-width: var(--md-main-max-width);
  }
}

@media (max-width: 991px) {
  #top-sections-container.sticky {
    /* 
      1. 应用与主体内容 .rst-content 相同的左内边距，
         以确保此容器内的第一个元素（tab 按钮）与页面内容左侧对齐。
    */
    padding-left: var(--topnav-margin-left);

    /* 
      2. (推荐) 为了视觉对称，同时应用右内边距。
    */
    padding-right: var(--topnav-margin-left);

    /*
      3. 确保 padding 被计算在元素的总宽度（width: 100%）之内，
         防止容器超出视口宽度。
    */
    box-sizing: border-box;

    top: calc(var(--topnav-height) - 11px);
  }
}

.top-tab-content {
  display: none;
}

.top-tab-content.active {
  display: block;
}

#top-sections {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE and Edge */
  white-space: nowrap;
  padding-left: 0;
}

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

#top-sections button {
  flex: 0 0 auto;
  margin-right: 40px;
  height: 40px;
  padding: 12px 12px;
  cursor: pointer;
  border: none;
  background-color: transparent;
  font-family: inherit;
  color: #fff;
  /* 修正：將 font-color 改為 color */
  font-weight: normal !important;
  transition: color 0.3s, border-bottom 0.3s;
  border-radius: 0;
  position: relative;
}

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

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

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