/* ============ 热门内容资讯 ==== 分类列表页 / 内容详情页 通用样式 ============ */

/* ---------------- 面包屑（同 style.css .breadcrumb） ---------------- */
.title{
	font-family: PingFangSC-Medium;
	font-size: 12px;
	color: #666666;
	letter-spacing: 0;
	line-height: 12px;
	font-weight: 500;
}
.title span{
	margin: 0 6px;
}
.title a{
	color: #333333;
	text-decoration: none;
}
.title a:hover{
	color: #FF6600;
}

/* ---------------- 列表页布局 ---------------- */
.zixun-wrap{
	display: flex;
	gap: 20px;
	align-items: flex-start;
}

/* 左侧分类导航（同 style.css .sidebar） */
.zixun-side{
	width: 170px;
	flex: none;
	margin-top: 8px;
}
.zixun-side-title{
	font-size: 16px;
	font-weight: bold;
	color: #FF6600;
	margin: 0 0 20px;
	display: flex;
	align-items: center;
}
.zixun-side-title:before{
	content: '';
	width: 0;
	height: 0;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	border-left: 8px solid #FF6600;
	margin-right: 8px;
}
.zixun-side ul{
	list-style: none;
	margin: 0;
	padding: 0;
}
.zixun-side li a{
	display: flex;
	align-items: center;
	font-size: 14px;
	padding: 12.5px 0;
	border-bottom: 1px solid #E0E0E0;
	text-decoration: none;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-family: PingFangSC-Medium;
	font-size: 12px;
	color: #666666;
	letter-spacing: 0;
	line-height: 12px;
	font-weight: 500;
}
.zixun-side li a:before{
	content: '';
	width: 0;
	height: 0;
	border-top: 3px solid transparent;
	border-bottom: 3px solid transparent;
	border-left: 5px solid #999999;
	margin-right: 8px;
	flex: none;
}
.zixun-side li a:hover{
	color: #FF6600;
}
.zixun-side li a:hover:before{
	border-left-color: #FF6600;
}
.zixun-side li a.active{
	color: #E24800;
}
.zixun-side li a.active:before{
	border-left-color: #E24800;
}
.zixun-side li:last-child a{
	border-bottom: none;
}

/* 右侧内容区 */
.zixun-main{
	flex: 1;
	min-width: 0;
}
.zixun-list{
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

/* 内容卡片（同 style.css .article-card 扁平化） */
.zixun-card{
	display: flex;
	gap: 15px;
	border-bottom: 1px solid #E0E0E0;
	cursor: pointer;
	width: 800px;
	height: 100px;
	align-items: center;
}
.zixun-card:last-child{
	border-bottom: none;
}
.zixun-card:hover .zixun-title{
	color: #FF6600;
}

.zixun-thumb{
	width: 90px;
	height: 60px;
	flex: none;
	border-radius: 4px;
	overflow: hidden;
	background: #DEDEDE;
}
.zixun-thumb img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 4px;
	display: block;
}
.zixun-thumb img[src=""]{
	display: none;
}

.zixun-card-body{
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.zixun-title{
	margin: 0 0 10px;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	font-family: PingFangSC-Medium;
	font-size: 14px;
	color: #222222;
	letter-spacing: 0;
	line-height: 14px;
	font-weight: 500;
}
.zixun-meta{
	display: flex;
	align-items: center;
	gap: 20px;
	font-size: 14px;
	color: #999999;
	justify-content: space-between
}
.zixun-user{
	display: flex;
	align-items: center;
	gap: 5px;
	min-width: 0;
}
.zixun-author{
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-family: PingFangSC-Regular;
	font-size: 12px;
	color: #A5A5A5;
	letter-spacing: 0;
	line-height: 12px;
	font-weight: 400;
}
.zixun-time{
	flex: none;
	font-family: PingFangSC-Regular;
	font-size: 12px;
	color: #A5A5A5;
	letter-spacing: 0;
	line-height: 12px;
	font-weight: 400;
}

/* 列表页头像（20px 圆形，同 style.css .avatar） */
.zixun-avatar-wrap{
	position: relative;
	display: inline-block;
	width: 20px;
	height: 20px;
	flex: none;
	border-radius: 50%;
	overflow: hidden;
	background: #C5CCD6;
}
.zixun-avatar-default{
	position: absolute;
	top: 0;
	left: 0;
	width: 20px;
	height: 20px;
	line-height: 20px;
	text-align: center;
	color: #ffffff;
	font-size: 12px;
	background: #C5CCD6;
}
.zixun-avatar-img{
	position: absolute;
	top: 0;
	left: 0;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	display: block;
}

/* 空态 */
.no-data{
	height: 120px;
	line-height: 120px;
	text-align: center;
	color: #999999;
	font-size: 14px;
}

/* 分页器（镜像 jinrongpuhui #pager 样式） */
.zixun-pager{
	list-style: none;
	display: flex;
	flex-wrap: nowrap;
	justify-content: right;
	font-size: 14px;
	margin-top: 8px;
}
.zixun-pager li{
	margin: 0 5px;
	cursor: pointer;
}
.zixun-pager li.red{
	color: crimson;
}

/* ---------------- 详情页 ---------------- */
.art-detail{
	max-width: 800px;
	background: #ffffff;
	border-radius: 8px;
}
.art-title{
	position: static;
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: PingFangSC-Medium;
	font-size: 12px;
	color: #222222;
	letter-spacing: 0;
	line-height: 12px;
	font-weight: 500;
	margin-bottom: 20px;
}
.art-title:before{
	content: '';
	width: 3px;
	height: 16px;
	background: #FE6102;
	flex: none;
}
.art-meta{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 16px;
	border-bottom: 1px solid #EEEEEE;
}
.art-user{
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
}
.art-author{
	font-family: PingFangSC-Regular;
	font-size: 12px;
	color: #A5A5A5;
	letter-spacing: 0;
	line-height: 12px;
	font-weight: 400;
}
.art-time{
	font-family: PingFangSC-Regular;
	font-size: 12px;
	color: #A5A5A5;
	letter-spacing: 0;
	line-height: 12px;
	font-weight: 400;
}
.art-video{
	margin-top: 20px;
}
.zixun-video{
	width: 100%;
	border-radius: 8px;
	display: block;
}
.art-body{
	margin-top: 20px;
	word-break: break-word;
}
.art-p{
	font-size: 15px;
	line-height: 1.7;
	color: #666666;
	text-indent: 2em;
	margin: 0 0 16px;
}
.art-body img{
	max-width: 100%;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
	display: block;
	margin: 16px auto;
}

/* 详情页头像 */
.art-avatar-wrap{
	position: relative;
	display: inline-block;
	width: 24px;
	height: 24px;
	flex: none;
	border-radius: 50%;
	overflow: hidden;
	background: #C5CCD6;
}
.art-avatar-default{
	position: absolute;
	top: 0;
	left: 0;
	width: 40px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	color: #ffffff;
	font-size: 16px;
	background: #C5CCD6;
}
.art-avatar-img{
	position: absolute;
	top: 0;
	left: 0;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	display: block;
}

/* ---------------- 骨架屏 ---------------- */
.sk{
	position: relative;
	overflow: hidden;
	background: #F0F1F3;
	border-radius: 4px;
}
.sk::before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 50%;
	height: 100%;
	background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.6), rgba(255,255,255,0));
	transform: translateX(-200%);
	animation: sk-wave 1.4s ease-in-out infinite;
}
@keyframes sk-wave{
	0%{ transform: translateX(-200%); }
	100%{ transform: translateX(400%); }
}
.sk-side-line{
	height: 14px;
	margin: 9px 0;
}
.sk-card{
	display: flex;
	align-items: center;
	gap: 15px;
	width: 800px;
	height: 100px;
	border-bottom: 1px solid #EEEEEE;
}
.sk-thumb{
	width: 90px;
	height: 60px;
	flex: none;
}
.sk-body{
	flex: 1;
	min-width: 0;
}
.sk-line{
	height: 14px;
	margin-bottom: 12px;
}
.sk-t1{
	width: 82%;
}
.sk-t2{
	width: 55%;
	margin-bottom: 28px;
}
.sk-t3{
	width: 35%;
	height: 12px;
	margin: 0;
}

/* 详情页骨架屏 */
.sk-d-title{
	width: 360px;
	height: 16px;
	margin-bottom: 16px;
}
.sk-d-meta{
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 22px;
}
.sk-d-avatar{
	width: 24px;
	height: 24px;
	border-radius: 50%;
	flex: none;
}
.sk-d-author{
	width: 80px;
	height: 12px;
}
.sk-d-time{
	width: 160px;
	height: 12px;
}
.sk-d-line{
	height: 14px;
	margin-bottom: 14px;
}

/* ---------------- 响应式 ---------------- */
@media (max-width: 768px){
	.sk-card{
		width: 100%;
		gap: 12px;
	}
	.zixun-wrap{
		flex-direction: column;
		gap: 12px;
	}
	.zixun-side{
		width: 100%;
		border-right: none;
		padding-right: 0;
		margin-top: 0;
	}
	.zixun-side ul{
		display: flex;
		overflow-x: auto;
		white-space: nowrap;
		padding: 0;
	}
	.zixun-side li{
		flex: none;
	}
	.zixun-side li a{
		padding: 8px 12px;
		border-bottom: none;
	}
	.zixun-thumb{
		width: 110px;
		height: 62px;
	}
	.zixun-card{
		gap: 12px;
	}
	.art-detail{
		padding: 16px 16px 24px;
	}
	.art-p{
		font-size: 15px;
	}
	.art-title{
		font-size: 18px;
	}
}