/* 基础重置：解决默认样式问题 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* 盒模型优化，避免宽度溢出 */
}
ul {
    list-style: none;
}
a {
    text-decoration: none;
    color: inherit;
}
img {
    display: block; /* 解决图片底部留白 */
}

/* 产品徽章样式（与彩色按钮风格统一，整合优化版：修复不显示问题） */
/* 基础徽章样式 - 对齐原按钮的视觉风格 */
.product-badge {
    display: inline-block; /* 行内块级，支持宽高和边距 */
    padding: 5px 10px;     /* 与按钮一致的内边距 */
    border-radius: 20px;    /* 圆角，和按钮统一 */
    font-size: 16px;        /* 字体大小匹配 */
    font-weight: bold;      /* 移除重复的 font-weight */
    color: #fff !important; /* 强制白色文字，避免a标签样式覆盖 */
    cursor: default;        /* 鼠标样式（非链接则用default） */
    transition: background-color 0.2s, transform 0.2s; /* 过渡效果和按钮一致 */
    border: none;           /* 去掉默认边框 */
    line-height: 1.5rem;
    /* 核心：绝对定位实现视频项右上角精准展示 */
    position: absolute;
    top: 10px;              /* 与视频项顶部的间距 */
    right: 10px;            /* 与视频项右侧的间距 */
    z-index: 100;           /* 确保徽章在最上层 */
    white-space: nowrap;    /* 防止文字换行 */
    /* 新增：强制显示，避免被意外隐藏（空数据场景单独处理） */
    display: inline-block !important;
}

/* 兜底内容样式：若动态变量为空，显示默认文字 */
.product-badge .badge-fallback {
    display: inline;
}

.product-badge span {
    font-size: 12px;
    opacity: 0.8;
    margin-left: 4px; /* 增加间距，优化排版 */
}

/* 多种彩色样式（和之前按钮配色保持统一） */
.product-badge.red {
    background-color: #e53e3e; /* 红色 - 匹配btn-red */
}
.product-badge.blue {
    background-color: #3182ce; /* 蓝色 - 匹配btn-blue */
}
.product-badge.green {
    background-color: #38a169; /* 绿色 - 匹配btn-green */
}
.product-badge.purple {
    background-color: #805ad5; /* 紫色 - 匹配btn-purple */
}
.product-badge.orange {
    background-color: #ed8936; /* 橙色 - 匹配btn-orange */
}

/* 悬停效果：加深对应颜色 */
.product-badge.red:hover {
    background-color: #c53030;
}
.product-badge.blue:hover {
    background-color: #2b6cb0;
}
.product-badge.green:hover {
    background-color: #2f855a;
}
.product-badge.purple:hover {
    background-color: #6b46c1;
}
.product-badge.orange:hover {
    background-color: #dd6b20;
}

/* 点击/激活效果：轻微缩小 */
.product-badge:active {
    transform: scale(0.98);
}

/* 徽章隐藏逻辑：仅隐藏完全无内容的情况（优化：减少过度隐藏） */
/* 1. 完全空的徽章隐藏（:empty 匹配无任何内容的元素） */
/* 注意：若使用了兜底内容，此规则不会生效 */
.product-badge:empty {
    display: none !important;
}

/* 2. 兼容旧浏览器：仅当手动标记为空时隐藏 */
.product-badge[data-is-blank="true"],
.product-badge.blank-content {
    display: none !important;
}

/* 移除复杂的:has()隐藏逻辑（易触发误隐藏，改为后端控制） */
/* 若需保留，需确保浏览器兼容且数据不为空 */
/* @supports selector(:has(*)) { ... } */

/* 链接样式：适配徽章作为链接的场景 */
.product-badge.link {
    cursor: pointer;
    text-decoration: none;
}

/* 视频列表外层容器：固定1200px宽度，居中 */
.wrapvideo {
    width: 1200px;
    margin: 0 auto;
    padding: 20px 0;
}

/* 面包屑导航：优化样式，保持原有视觉 */
.breadcrumb-map {
    background: #fafafa;
    padding: 10px;
    border: 1px solid #ececec;
    border-bottom: 0;
    border-radius: 8px;
}

/* 视频列表容器：清除浮动，使用flex替代float */
.video-list-container {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap; /* 自动换行 */
    gap: 20px; /* 列间距和行间距 */
}

/* 视频项：三列布局核心 + 相对定位（徽章的定位父容器） */
.video-item {
    flex: 0 0 calc((100% - 2 * 20px) / 3); /* 精准三列 */
    background: #fff;
    padding: 10px;
    box-shadow: 0 5px 10px rgb(0 0 0 / 10%);
    transition: transform 0.3s ease; /* hover动画 */
    border-radius: 8px;
    position: relative !important; /* 强制相对定位，避免被覆盖 */
    overflow: visible; /* 改为visible，防止徽章超出时被隐藏（若需要限制，可改回hidden并调整定位） */
    margin-bottom: 20px; /* 增加底部间距，优化布局 */
}

/* 视频项hover效果 */
.video-item:hover {
    transform: translateY(-5px);
}

/* 视频缩略图容器 */
.video-thumbnail {
    position: relative;
    display: block;
    margin-top: 5px; /* 增加顶部间距，避免与徽章重叠 */
}

.video-thumbnail img {
    width: 100%;
    height: auto; /* 保持宽高比 */
    opacity: 1;
    transition: opacity 0.3s linear;
}

.video-thumbnail:hover img {
    opacity: 0.6;
}

/* 播放图标：优化定位和样式 */
.play-icon {
    background: url(/skin/images/play-button-small.png) no-repeat center center;
    background-size: contain; /* 适配图标大小 */
    width: 40px;
    height: 40px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); /* 精准居中 */
    opacity: 0.6;
    z-index: 99; /* 低于徽章的z-index */
    transition: opacity 0.2s linear;
}

.video-thumbnail:hover .play-icon {
    opacity: 0.9;
}

/* 视频标题：优化溢出处理 */
.video-title {
    margin-top: 10px;
    font-size: 16px;
    font-weight: 500;
    color: #333;
    height: 42px;
    line-height: 21px; /* 两行文字垂直居中 */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 最多显示两行 */
    -webkit-box-orient: vertical;
}

.video-title a {
    font-size: 1.2em;
    color: #000;
    transition: color 0.3s ease;
}

.video-title a:hover {
    color: #00A8DF; /* hover颜色变化 */
}

/* 视频元信息：优化布局 */
.video-meta {
    padding-top: 5px;
    margin-top: 10px;
    border-top: 1px solid #e3e3e3;
    justify-content: space-between; /* 左右对齐 */
    /*display: flex;  补充flex布局 */
}

.video-time {
    color: #999;
}

.video-views {
    color: #999;
}

/* 无数据提示 */
.no-data-tip {
    text-align: center;
    color: #999;
    padding: 30px 0;
}

/* 响应式布局：适配平板/手机端 */
/* 平板端（980px以下）：两列布局 */
@media screen and (max-width: 980px) {
    .wrapvideo {
        width: 95%; /* 适配屏幕 */
    }
    .video-list-container {
        gap: 15px; /* 减小间距 */
    }
    .video-item {
        flex: 0 0 calc((100% - 1 * 15px) / 2); /* 两列布局 */
    }
    /* 平板端徽章适配 */
    .product-badge {
        top: 8px;
        right: 8px;
        font-size: 14px;
        padding: 4px 8px;
    }
}

/* 手机端（640px以下）：单列布局 */
@media screen and (max-width: 640px) {
    .video-item {
        flex: 0 0 100%; /* 单列布局 */
    }
    /* 分页按钮自适应 */
    .page-item {
        padding: 3px 8px;
        font-size: 14px;
    }
    .first-page, .last-page {
        display: none; /* 隐藏首页/尾页 */
    }
    /* 手机端徽章适配 */
    .product-badge {
        top: 6px;
        right: 6px;
        font-size: 12px;
        padding: 3px 7px;
    }
}

/* 保留原有其他样式 */
.video-container{margin-top:30px}
.video-header{padding:0 20px}
.video-desc{border-bottom:1px solid #e3e3e3}
.video-desc{border-bottom:1px solid #e3e3e3;text-align:center;padding-bottom:10px;font-size:16px}
.v-container {margin: 0 0 10px;margin-right: 370px;}
.v-header{padding: 10px 0 5px 0;}
.v-header h1{font-size:20px;line-height:28px;font-weight:400;color:#333;}
.v-header .article-meta{text-align:left;margin-top: 5px;margin-bottom: 5px;}
.fa-exclamation-triangle{color:#e94c3d;}
.v-container li{line-height:27px;}
.v-container li strong{padding: 3px 12px;background:#e94c3d;color:#fff; margin-right: 10px;border-radius: 27px;}
.videoside{position:relative;float:left;margin-left:-360px;width:360px;margin-bottom:10px;}
#divPersonal{position:relative;background-color:#fff;    overflow: hidden;    border: 1px solid rgba(133,153,171,0.2);border-radius: 4px;box-shadow: 0 2px 26px 0 rgb(133 153 171 / 10%);}
#divPersonal ul {overflow: hidden;padding: 20px;}
#divPersonal .author{display:block;background-color:#0052cc;margin:-1px;border-radius:5px 5px 0 0;padding: 10% 5%;overflow: hidden;}
#divPersonal .avatar{border-radius:50%;border:2px solid #fff;position:relative;z-index:2;background-color:#fff;width: 25%;float: left;}
#divPersonal .avatar i{display:block;padding-bottom:100%;border-radius:50%;background:url(images/avatar.png) no-repeat center center;background-size:cover;background-color:#f4f4f4;}
#divPersonal .intro{text-align:left;padding:15px;width: 70%;float:left;}
#divPersonal .name{font-size:18px;line-height:1.5em;color:#fff;margin-bottom:5px;}
#divPersonal .job {font-size:14px;color:#ddd;line-height:2em;}
#divPersonal .meta{border-top:1px solid rgba(133,153,171,0.2);}
#divPersonal .meta li{float:left;width:50%;text-align:center;font-size:14px;color:#7e8299;line-height:1.75em;}
#divPersonal .meta span{font-size:18px;line-height:1.35em;color:#172b4c;display:block;}
.video_list{position:relative;background-color:#fff;  border: 1px solid rgba(133,153,171,0.2);border-radius: 4px;box-shadow: 0 2px 26px 0 rgb(133 153 171 / 10%);margin-top:10px;}
.video_list h3{padding: 15px 10px 10px;font-size: 18px;border-bottom: 1px solid #ddd;}
.svideo .owl-prev{left: -15px;}
.svideo .owl-next{right: -15px;}
.svideo .owl-next,.svideo .owl-prev{box-shadow:0 5px 10px rgba(0,0,0,.16);background-color:#4776e6;color:#fff;font-size:17px;border-radius:0;height:45px;line-height:45px;position:absolute;text-align:center;top:40%;transition:background-color .5s cubic-bezier(.77,0,.175,1),color .5s cubic-bezier(.77,0,.175,1);width: 25px;}
.svideo .owl-next,.svideo .owl-prev{opacity:0;}
.svideo:hover .owl-next,.svideo:hover .owl-prev{opacity:1;-webkit-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out;}
.v-container .authorbio{padding:20px 10px;}
.authorbio{overflow: hidden;}
.authorbio li img{text-align: center;width: auto;height: auto;border-radius: initial;border:none;}
.authorbio img:hover{transform:inherit !important;border:none!important;}
.mse-video{width:100%;max-width:790px;height:440px;}
#video-mse video{width:100%;max-width:100%;}
@media screen and (max-width:1024px){
    .mse-video{height: 340px;}
}
@media screen and (max-width:980px){
    .mse-video{height: 435px;}
    .v-container{margin-right:0;}
    .videoside{float: none;margin-left: 0;clear: both;width: 100%;}
    .mse-video{margin:0 auto;}
}
@media screen and (max-width:768px){
    .mse-video{height: 410px;}
}
@media screen and (max-width:640px){
    .mse-video{height: 260px;}
}