/* ============================= */
/* CSS 初始化与全局样式 */
/* ============================= */
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
legend,
input,
textarea,
button,
p,
blockquote,
th,
td {
    margin: 0;
    padding: 0;
}

@font-face {
    font-family: "HarmonyOS-Medium";
    src: url("/font-family/HarmonyOS_Sans_SC_Medium.ttf") format("truetype");
}

@font-face {
    font-family: "HarmonyOS-light";
    src: url("/font-family/HarmonyOS_Sans_SC_Light.ttf") format("truetype");
}

@font-face {
    font-family: "HarmonyOS-Bold";
    src: url("/font-family/HarmonyOS_Sans_SC_Bold.ttf") format("truetype");
}

@font-face {
    font-family: "HarmonyOS-Regular";
    src: url("/font-family/HarmonyOS_Sans_SC_Regular.ttf") format("truetype");
}


body {
    background: #f1f1f1;
    text-align: center;
    font-family: 'HarmonyOS-Regular';
}

li {
    list-style: none;
}

a {
    text-decoration: none;
}

img {
    border: none;
}

body {
    max-width: 100vw;
    overflow-x: hidden;
    /* 可选，以防止任何内部元素超出 */
}

#bottom {
    position: relative;
    /* top: 100vw; */
}

/* ============================= */
/* 吸顶导航样式 (sticky-nav)  */
/* ============================= */
.sticky-nav {
    position: fixed;
    top: 3vw;
    left: 0;
    width: 100%;
    height: auto;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6vw;
    z-index: 1000;
    color: #383838;
    box-shadow: 0 0.2vw 0.5vw rgba(0, 0, 0, 0.05);
    padding: 1vw 0;
}

.sticky-nav .center {
    font-family: 'HarmonyOS-Bold';
    font-size: 1vw;
    margin-right: 28vw;
}

.tab {
    display: flex;
}


.nav-item {
    font-family: 'HarmonyOS-Regular';
    font-size: 0.85vw;
    cursor: pointer;
    border-right: 0.02vw solid #E5E5E5;
    padding: 0 1vw;
    line-height: 1.6vw;
    color: #383838;
}

.nav-item:nth-last-child(1) {
    border-right: none;
}

.nav-item.active {
    color: #10069F;
    position: relative;
    font-weight: 600;
}

/* ============================= */
/* 页面主体容器 & 标题     */
/* ============================= */
.download-container {
    width: calc(890 / 1920 * 100vw);
    margin: calc(208 / 1920 * 100vw) auto 0 auto;
    /* 顶部留白，避免被sticky遮挡 */
    padding-bottom: calc(20 / 1920 * 100vw);
    text-align: left;
}

.title {
    text-align: center;
    font-size: calc(26 / 1920 * 100vw);
    font-weight: 500;
    font-family: 'HarmonyOS-Medium';
    color: #383838;
    margin-bottom: calc(60 / 1920 * 100vw);
}

/* ============================= */
/* Download Section 公共样式 */
/* ============================= */
.download-section {
    margin-bottom: calc(60 / 1920 * 100vw);
}

/* 小节标题 */
.download-section h2 {
    font-size: 1.1vw;
    font-family: 'HarmonyOS-Bold';
    color: #222;
    margin-bottom: calc(20 / 1920 * 100vw);
}

/* ========================================= */
/* Families / Resources 的列表（类似表格）*/
/* 使用 .download-list + .download-item 布局     */
/* ========================================= */
.download-list {
    background: #fff;
    border-radius: calc(10 / 1920 * 100vw);
    box-shadow: 0 0.6vw 1vw rgba(0, 0, 0, 0.05);
    overflow: hidden;
    padding: 0;
    /* 列表里每项有内边距 */
}

.download-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: calc(22 / 1920 * 100vw) calc(30 / 1920 * 100vw);
    font-size: calc(16 / 1920 * 100vw);
    color: #333;
    position: relative;
    /* 必须加，伪元素定位依赖它 */
    transition: background 0.18s ease, transform 0.18s ease;
}

/* 伪元素绘制“短线条”底边 */
.download-item::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: calc(30 / 1920 * 100vw);
    right: calc(30 / 1920 * 100vw);
    height: 1px;
    background-color: #E5E5E5;
}

/* 去掉最后一行的底线 */
.download-item:last-child::after {
    content: none;
}


/* .download-item:hover {
    background: #fafafa;
} */

/* 左侧文本偏小行注释等 */
.download-item .label {
    color: #666;
    font-size: 0.85vw;
}

/* 左侧文字 */
.item-text {
    font-family: 'HarmonyOS-Regular';
    font-size: calc(16 / 1920 * 100vw);
    color: #333;
    /* 为了防止文本过长挤压图标，限制最大宽度并截断显示 */
    max-width: calc(100% - 8.5vw);
    /* 留出右侧图标空间（可按需调整） */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 右侧图标容器 */
.actions {
    display: flex;
    gap: calc(20 / 1920 * 100vw);
    align-items: center;
}

/* 单个图标 */
.action-icon {
    width: calc(22 / 1920 * 100vw);
    height: auto;
    cursor: pointer;
    transition: transform 0.18s ease, opacity 0.18s ease;
    /* opacity: 0.9; */
    display: inline-block;
}

.action-icon:hover {
    /* transform: translateY(-0.06vw) scale(1.05); */
    opacity: 1;
}

/* 如果图标是 <a><img></a> 的形式，保证链接没有额外默认样式 */
.actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: inherit;
}


/* ============================= */
/* 资源类型选项卡（Resources 顶部） */
/* ============================= */
.resource-tabs {
    position: relative;
    display: flex;
    justify-content: flex-start;
    margin-top: calc(28 / 1920 * 100vw);
    padding-left: calc(30 / 1920 * 100vw);
    border-top-left-radius: calc(10 / 1920 * 100vw);
    border-top-right-radius: calc(10 / 1920 * 100vw);
    background-color: #fff;
}

.resource-tabs::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: calc(30 / 1920 * 100vw);
    right: calc(30 / 1920 * 100vw);
    height: 1px;
    background-color: #E5E5E5;
    z-index: 1;
    transform: scaleY(0.8);
    transform-origin: bottom;
}

.resource-tabs .tab {
    position: relative;
    background: none;
    border: none;
    outline: none;
    font-family: "HarmonyOS-Medium";
    font-size: calc(16 / 1920 * 100vw);
    font-weight: 500;
    padding: calc(22 / 1920 * 100vw) calc(20 / 1920 * 100vw) calc(20 / 1920 * 100vw) calc(20 / 1920 * 100vw);
    cursor: pointer;
    color: #333;
    transition: color 0.2s;
}

.resource-tabs .tab:first-child {
    padding-left: 0;
}

.resource-tabs .tab:hover {
    color: #383838;
}

.resource-tabs .tab.active {
    /* font-weight: 600; */
    color: #383838;
}

.resource-tabs .tab:first-child.active::after {
    left: calc(10 / 1920 * 100vw);
}

.resource-tabs .tab.active::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: calc(20 / 1920 * 100vw);
    height: calc(2 / 1920 * 100vw);
    background-color: #222;
    border-radius: 1px;
    z-index: 9;
}

#resource-content {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* ============================= */
/* Videos 网格卡片样式        */
/* ============================= */
.video-grid {
    display: flex;
    flex-wrap: wrap;
    gap: calc(25 / 1920 * 100vw);
    margin-top: 1.2vw;
}

.video-card {
    width: calc(280 / 1920 * 100vw);
    background: #fff;
    border-radius: 0.9vw;
    box-shadow: 0 0.6vw 1vw rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transition: transform 0.22s ease, box-shadow 0.22s ease;
    position: relative;
    /* cursor: pointer; */
}

/* 添加蒙层容器 */
.video-card .overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 25%;
    background: linear-gradient(180deg, rgba(16, 6, 159, 0) 0%, rgba(16, 6, 159, 1) 100%);
    pointer-events: none;
    /* 确保蒙层不会干扰鼠标事件 */
    z-index: 1;
    /* 在图片上层，播放图标下层 */
}

/* .video-card:hover {
    transform: translateY(-0.4vw);
    box-shadow: 0 1vw 2vw rgba(0, 0, 0, 0.1);
} */

.video-card img {
    width: 100%;
    object-fit: cover;
    display: block;
    position: relative;
    z-index: 0;
}

.video-card .play-icon {
    position: absolute;
    bottom: calc(15 / 1920 * 100vw);
    right: calc(15 / 1920 * 100vw);
    width: calc(30 / 1920 * 100vw);
    height: auto;
    transform: translate(0, 0);
    /* opacity: 0.85; */
    transition: opacity 0.3s, transform 0.3s;
    z-index: 2;
    cursor: pointer;
}

.video-card .play-icon:hover {
    opacity: 1;
    transform: translate(0, 0) scale(1.1);
}

.video-title {
    padding: calc(22 / 1920 * 100vw) calc(30 / 1920 * 100vw);
    font-size: calc(16 / 1920 * 100vw);
    font-weight: 400;
    color: #383838;
    font-family: 'HarmonyOS-Regular';
    display: none;
}

/* 视频卡右下角小眼睛图标（示例） */
.video-card i {
    position: absolute;
    bottom: 0.8vw;
    right: 0.8vw;
    color: rgba(0, 0, 0, 0.45);
    font-size: 1.0vw;
}

/* ============================= */
/* 小组件 / 公用微调           */
/* ============================= */
.centered-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}