/* 恋爱宝典页面专属样式（导航/页脚复用 home.css） */

/* 顶部 banner */
.top-home-tips {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.valuable-book-home {
  display: block;
  width: 100%;
}

.vb-banner-text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 0 5.75rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #fff;
}

.vb-banner-title {
  font-weight: 700;
  font-size: 3rem;
  color: #fff;
}

.vb-banner-subtitle {
  margin-top: 0.6rem;
  font-weight: 600;
  font-size: 1.75rem;
  color: #fff;
}

.vb-banner-desc {
  margin-top: 1rem;
  max-width: 62rem;
  font-weight: 400;
  font-size: 1.13rem;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.92);
}

/* 内容区 */
.content-box {
  width: 100%;
  box-sizing: border-box;
  padding: 1.5rem 5.75rem;
  display: flex;
  background: #f7f6f8;
}

.content-f {
  width: 100%;
  height: 100%;
  display: flex;
}

/* 左侧章节目录 */
.chapter {
  min-width: 18.5rem;
  max-width: 24.5rem;
  height: 49.13rem;
  background: #fff;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding-bottom: 1rem;
  border-radius: 0.3rem;
}

.chapter-item {
  width: 100%;
  padding: 0.7rem 1.4rem 0.7rem 1.63rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  margin-top: 0.4rem;
}

.chapter-item-active {
  background: #fff0f2;
}

.chapter-item-top {
  font-weight: 600;
  font-size: 1.25rem;
}

.chapter-item-bottom {
  font-weight: 400;
  font-size: 1.25rem;
  margin-top: 0.1rem;
}

/* 右侧阅读内容 */
.chapter-read {
  min-width: 50rem;
  max-width: 76.5rem;
  margin-left: 1.5rem;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 3.75rem 6.5rem 2.88rem;
  box-sizing: border-box;
  border-radius: 0.3rem;
}

.chapter-read-box {
  width: 100%;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.read-top-img {
  max-width: 63.5rem;
  height: 22.06rem;
}

.read-top-img img {
  width: 100%;
  height: 100%;
}

.read-content {
  max-width: 63.5rem;
  margin-top: 1.88rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.read-content-title {
  font-weight: 600;
  font-size: 2.5rem;
  color: #1d1d1d;
  text-align: center;
}

.read-content1 {
  width: 100%;
  margin-top: 1.13rem;
  font-weight: 600;
  font-size: 1.25rem;
  color: #ff2442;
}

.read-content2 {
  width: 100%;
  margin-top: 0.3rem;
  font-weight: 400;
  font-size: 1.25rem;
  color: #1d1d1d;
}

.read-content2-active {
  margin-top: 1.13rem;
}

.read-content2 span {
  font-weight: 600;
}

.read-content3 {
  width: 100%;
  margin-top: 1.13rem;
  font-weight: 400;
  font-size: 1.25rem;
  color: #666666;
}

.read-content3 span {
  font-weight: 600;
  color: #1d1d1d;
}

/* 一键发布引导 */
.vb-cta {
  width: 100%;
  box-sizing: border-box;
  background: #ff2442;
  padding: 3.5rem 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.vb-cta-title {
  font-weight: 700;
  font-size: 1.75rem;
  color: #ffffff;
}

.vb-cta-desc {
  margin-top: 0.9rem;
  font-weight: 400;
  font-size: 1.13rem;
  color: rgba(255, 255, 255, 0.92);
}

.vb-cta-btn {
  margin-top: 1.75rem;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 12.5rem;
  height: 3.4rem;
  background: #ffffff;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.12);
  border-radius: 2rem;
  font-weight: 700;
  font-size: 1.25rem;
  color: #ff2442;
  cursor: pointer;
}

/* 响应式 */
@media (max-width: 1100px) {
  .content-box {
    padding: 1.5rem 2rem;
  }
  .chapter-read {
    min-width: 0;
    padding: 2.5rem 2rem;
  }
}

@media (max-width: 840px) {
  .content-box {
    flex-direction: column;
    padding: 1rem;
  }
  .chapter {
    max-width: none;
    height: auto;
    max-height: 22rem;
  }
  .chapter-read {
    margin-left: 0;
    margin-top: 1rem;
  }
  .read-top-img {
    height: auto;
  }
  .vb-banner-text {
    padding: 0 1.5rem;
  }
  .vb-banner-title {
    font-size: 2rem;
  }
}