/* 顶部导航栏样式 */
.top-bar {
    background-color: rgba(50, 50, 50, 0.8); /* 黑灰色半透明背景 */
    display: flex; /* 使用 Flexbox 布局 */
    align-items: center; /* 垂直居中对齐 */
    border-bottom: 1px solid #333; /* 添加底部边框 */
    position: sticky; /* 固定在页面顶部 */
    top: 0;
    z-index: 1000; /* 确保导航栏覆盖其他内容 */
    height: 40px; /* 设置导航栏的高度（可以根据需要调整） */
    padding: 0; /* 去掉内边距，确保没有留白 */
}

/* 导航按钮样式 */
.nav-button {
    text-decoration: none; /* 去掉下划线 */
    color: #fff; /* 文字颜色为白色 */
    font-size: 14px; /* 减小字体大小 */
    border: none; /* 去掉边框 */
    border-radius: 0; /* 去掉圆角，确保按钮与导航栏无缝衔接 */
    background-color: transparent; /* 按钮背景透明 */
    transition: background-color 0.3s ease, color 0.3s ease; /* 平滑过渡效果 */
    flex: 1; /* 每个按钮占据相等的空间 */
    text-align: center; /* 文本居中对齐 */
    height: 100%; /* 让按钮填满导航栏的高度 */
    line-height: 40px; /* 设置行高与导航栏高度一致，确保文字垂直居中 */
}

/* 鼠标悬停时的按钮样式 */
.nav-button:hover {
    background-color: rgba(255, 255, 255, 0.2); /* 半透明白色背景 */
    color: #fff; /* 文字颜色保持白色 */
}

/* 激活状态的按钮样式（可选） */
.nav-button.active {
    background-color: rgba(255, 255, 255, 0.15); /* 更深的半透明白色背景 */
    /* font-weight: bold; /* 加粗文字 */
}

/* 展示栏样式 */
body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background-color: #000; /* 设置背景为黑色 */
}

/* PC端适配，固定每行6个 */
.video-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr); /* PC 端固定 6 列 */
    gap: var(--gap, 1px); /* 允许动态修改间距 */
    padding: 0;
}

/* 移动端适配，固定每行4个 */
@media (max-width: 767px) {
    .video-grid {
        grid-template-columns: repeat(4, 1fr); /* 移动端固定 4 列 */
    }
}

.video-item {
    aspect-ratio: 3 / 4; /* 固定 3:4 比例 */
    position: relative;
    overflow: hidden;
    background-color: #000;
}

video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover; /* 填充整个窗口，避免黑边 */
}