.sidebar {
    width: 15.625vw; /* 300px / 1920 * 100 */
    background-color: #fff;
    flex-shrink: 0;
}

.sidebar h2 {
    color: #fff;
    background-color: #00a0e9;
    padding: 0.833vw; /* 16px / 1920 * 100 */
    margin: 0;
    font-size: 1.042vw; /* 20px / 1920 * 100 */
}

.menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.menu-group {
    border-bottom: 0.052vw solid #e6e6e6; /* 1px / 1920 * 100 */
}

.menu-item {
    padding: 0.625vw 0.833vw; /* 12px 16px / 1920 * 100 */
    cursor: pointer;
    display: flex;
    align-items: center;
    background-color: #f8f8f8;
}

.menu-item:hover {
    background-color: #f0f0f0;
}

.menu-text {
    font-size: 0.833vw; /* 16px / 1920 * 100 */
    color: #333;
}

.arrow-list {
    font-size: 0.925vw; /* 12px / 1920 * 100 */
    margin-right: 0.417vw; /* 8px / 1920 * 100 */
    color: #666;
    transition: transform 0.3s;
    display: inline-block;
}

.menu-item.active .arrow {
    transform: rotate(90deg);
}

.sub-menu {
    display: none;
    list-style: none;
    padding-left: 1.042vw; /* 20px / 1920 * 100 */
    margin: 0;
    background-color: #fff;
}

.sub-menu a {
    display: block;
    padding: 0.521vw 0.833vw; /* 10px 16px / 1920 * 100 */
    color: #666;
    text-decoration: none;
    font-size: 0.729vw; /* 14px / 1920 * 100 */
}

.sub-menu a:hover {
    color: #00a0e9;
}
/*子项高亮显示*/
.sub-menu li.active a {
    color: #00a0e9 !important;
    font-weight: bold;
    background-color: #f0f8ff;
    border-left: 3px solid #00a0e9;
}






/* 新增Tab栏样式 */
/* .product-tabs {
    display: flex;
    gap: 15px;
    margin: 20px 0;
    padding: 10px;
    border-radius: 20px;
    justify-content: space-around;
    width: 98.7%;
}

.tab-item {
    padding: 8px 20px;
    border: none;
    width: 100%;
    height: 100%;
    background: #f5f5f5;
    cursor: pointer;
    transition: all 0.3s;
}

.tab-item.active {
    background: rgb(0,160,233);
    color: white;
}
.tab-item:hover:not(.active) {
    background: #dee0e2;
} */



/* 新增Tab栏样式 */
.product-tabs {
    display: flex;
    gap: 10px; /* 更小的间隙以适应小屏幕 */
    margin: 20px 0;
    padding: 10px;
    border-radius: 20px;
    justify-content: space-around;
    width: 100%; /* 改为100%以填充父容器 */
    max-width: 1200px; /* 限制最大宽度，避免过大 */
    margin-left: auto;
    margin-right: auto;
    overflow-x: auto; /* 允许横向滚动（极端情况下） */
    scrollbar-width: none; /* 隐藏滚动条（可选） */
}

.tab-item {
    padding: 8px 15px; /* 减小左右内边距 */
    border: none;
    min-width: 80px; /* 最小宽度防止内容挤压 */
    text-align: center;
    background: #f5f5f5;
    cursor: pointer;
    transition: all 0.3s;
    border-radius: 10px; /* 圆角匹配父容器 */
    flex-shrink: 0; /* 禁止缩小 */
    font-size: clamp(8px, 2vw, 16px); /* 动态字体大小 */
}

.tab-item.active {
    background: rgb(0, 160, 233);
    color: white;
    transform: scale(1.05); /* 轻微放大激活项 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* 增强视觉层次 */
}

.tab-item:hover:not(.active) {
    background: #dee0e2;
    /* transform: scale(1.02); 悬停时轻微放大 */
}

/* 响应式调整：小屏幕时减少间隙和内边距 */
@media (max-width: 768px) {
    .product-tabs {
        gap: 5px;
        padding: 8px;
        border-radius: 15px;
    }
    .tab-item {
        padding: 6px 10px;
        min-width: 20px;
    }
}

/* 极端小屏幕（如手机竖屏）改为横向滚动 */
@media (max-width: 480px) {
    .product-tabs {
        justify-content: flex-start;
    }
}