/* ── 教程页面布局（IE10/11 兼容版）── */

html { scroll-padding-top: 76px; }

.pgbody {
  width: 100%;
}

/* 左侧固定菜单 */
.left-menu {
  width: 30%;
  float: left;
}
.tutorial-menu {
  position: fixed;
  top: 64px;
  width: 25%;
  height: calc(100vh - 64px);
  overflow-y: auto;
  border-right: 1px solid #e4e4e4;
  background: #f5f6f8;
}

/* 右侧内容区 */
@media (min-width: 768px) {
  .content-right {
    margin-left: 25%;
    padding: 24px 40px 48px;
  }
}
@media (max-width: 767px) {
  .left-menu { width: 100%; float: none; }
  .content-right { margin: 0; padding: 16px; }
  .tutorial-menu { width: 100%; position: relative; height: auto; }
}

/* 搜索区 */
.sidebar-search {
  padding: 10px 10px 6px;
  border-bottom: 1px solid #e4e4e4;
  position: relative;
}
.sidebar-search:after {
  content: '';
  display: table;
  clear: both;
}
#kws {
  float: left;
  width: calc(100% - 36px);
  border: 1px solid #e4e4e4;
  border-radius: 4px;
  padding: 5px 8px;
  font-size: 13px;
  outline: none;
}
#kws:focus { border-color: #e63027; }
#tree-qry {
  float: right;
  background: none;
  border: none;
  color: #e63027;
  cursor: pointer;
  font-size: 16px;
  padding: 4px 6px;
}
#tree-qry:hover { color: #c0261e; }

/* 搜索结果 */
#search-result {
  width: 100%;
  background: #fff;
  border: 1px solid #e4e4e4;
  display: none;
  z-index: 1000;
  position: absolute;
  top: 48px;
  left: 0;
  padding: 8px;
  list-style: none;
  box-shadow: 0 2px 12px rgba(0,0,0,.08);
}
#search-result li { line-height: 32px; list-style: none; padding: 4px 0; }
#search-result a { display: block; font-size: 13px; }

/* 目录树 */
#tree {
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}
/* 自定义树形菜单 */
.tut-tree, .tut-tree ul { list-style: none; padding: 0; margin: 0; }
.tut-node {
  display: block;
  padding: 12px 10px;
  cursor: pointer;
  font-size: 13px;
  color: #2c2c2c;
  line-height: 1.5;
}
.tut-node:hover { background: rgba(230,48,39,.06); color: #e63027; }
.tut-node.tut-selected { background: #fde8e7; color: #e63027; font-weight: 500; }
.tut-toggle {
  display: inline-block;
  width: 14px;
  font-size: 9px;
  color: #666;
  -ms-user-select: none;
  user-select: none;
}
.tut-node-label { display: inline-block; vertical-align: top; }
.tut-node a { color: inherit; }
.tut-children { padding-left: 14px; }

/* 移动端侧边栏展开按钮 */
#menu-expand-button {
  display: none;
  width: 100%;
  padding: 10px 16px;
  background: #e63027;
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 14px;
  text-align: left;
}
@media (max-width: 767px) {
  #menu-expand-button { display: block; }
  #left-menu { display: none; }
  #left-menu.open { display: block; }
}

/* 上/下一节按钮 */
.page-button {
  display: inline-block;
  color: #e63027;
  border: 1px solid #e63027;
  border-radius: 8px;
  padding: 5px 20px;
  font-size: 13px;
  margin-right: 8px;
  margin-bottom: 20px;
  -webkit-transition: background .22s ease, color .22s ease;
  transition: background .22s ease, color .22s ease;
}
.page-button:hover {
  background: #e63027;
  color: #fff;
}

/* 文章内容区 */
.blog-page-content h1 {
  font-size: 1.8em;
  font-weight: 700;
  color: #1a2e4a;
  padding: 8px 0 16px;
  border-bottom: 2px solid #e63027;
  margin-bottom: 20px;
}
.blog-page-content h2 {
  font-size: 1.3em;
  font-weight: 700;
  color: #1a2e4a;
  padding: 8px 0 8px;
  border-left: 3px solid #e63027;
  padding-left: 10px;
}
.blog-page-content h3 { font-size: 1.1em; }
.blog-page-content .subtitle-left { font-size: 1.2em; font-weight: bold; }
.blog-page-content .hide { display: none; }
.blog-page-content .box100 { clear: none; }
.blog-page-content img { max-width: 90%; padding-left: 16px; }
.blog-page-content table { border-collapse: collapse; }
.blog-page-content table, .blog-page-content th, .blog-page-content td {
  border: 1px solid #e4e4e4;
  padding: 4px 8px;
}

/* 视频框 */
.video-box {
  width: 80%;
  max-width: 700px;
  margin-bottom: 20px;
  background: #1a2e4a;
  border-radius: 8px;
  overflow: hidden;
}
.video-box.hide { display: none; }
@media (max-width: 767px) { .video-box { width: 100%; } }

/* 视频懒加载占位符 */
.video-placeholder {
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  position: relative;
  cursor: pointer;
  background: #1a2e4a;
}
.video-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -28px;
  margin-left: -28px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(230,48,39,.85);
  color: #fff;
  text-align: center;
  line-height: 56px;
  font-size: 20px;
  padding-left: 4px;
  -webkit-transition: background .22s ease, -webkit-transform .22s ease;
  transition: background .22s ease, transform .22s ease;
  pointer-events: none;
}
.video-placeholder:hover .video-play-btn {
  background: #e63027;
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
}

/* 页内目录（blog-header）*/
.blog-header {
  border: 1px solid #e4e4e4;
  border-radius: 8px;
  padding: 0;
  background: #f5f6f8;
  display: block;
}
/* 宽屏：固定在右侧 */
@media (min-width: 768px) {
  .blog-header {
    position: fixed;
    top: 96px;
    right: 32px;
    width: 240px;
    z-index: 50;
  }
}
/* 窄屏（手机）：内嵌在正文中 */
@media (max-width: 767px) {
  .blog-header { position: static; width: 100%; margin-bottom: 16px; }
  .blog-hh { width: 100%; }
}
.blog-header ul { padding: 8px 16px 0 4px; }
.blog-header li {
  line-height: 32px;
  list-style: none;
  padding-left: 0;
}
.blog-header li:hover { color: #e63027; }
.blog-header .header1 { padding-left: 0; }
.blog-header .header2 { padding-left: 16px; }
.blog-header .header3 { padding-left: 32px; }
.blog-header a { text-decoration: none; color: inherit; font-size: 13px; }
.blog-header a:hover { color: #e63027; }

/* 正文 */
.blog { line-height: 1.9; }
.blog img { max-width: 100%; }

li { list-style: inherit; }