.main__page .container__layout {
  padding: 140px 70px 70px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.head {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.head .slug {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}

.head .slug > p {
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  color: #8a8a8a;
  min-width: fit-content
}

.head .slug > span {
  height: 4px;
  width: 4px;
  border-radius: 50%;
  background: #858c94;
}

.head .head__title {
  font-size: 45px;
  line-height: 52px;
  font-weight: 700;
  margin-top: 24px;
  color: var(--dark-black-color);
}
.head .head__description {
  font-size: 28px;
  line-height: 34px;
  font-weight: 700;
  margin-top: 24px;
  color: var(--light-black-color);
}

.social__button {
  display: flex;
  justify-content: end;
  align-items: center;
  position: relative;
  margin: 40px 0;
}
.social__button .item__btn {
  cursor: pointer;
  display: inline-flex;
  width: 20px;
}
.social__button .item__btn svg path {
  transition: all 0.3s ease;
}
.social__button .item__btn svg:hover path {
  fill: var(--primary-color);
}
.head .head__banner {
  display: inline-flex;
  width: 100%;
  height: 536px;
  border-radius: 20px;
  overflow: hidden;
}

.head .head__banner > img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.head__short-description p {
  margin-top: 30px;
  display: inline-block;
  font-size: 20px;
  line-height: 32px;
  font-weight: 700;
}

.social__button .list__btn {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 16px;
}

.social__button .list__btn {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 16px;
}

.social__button .head__reaction {
  display: flex;
  align-items: center;
  gap: 16px;
}

.social__button .head__reaction > p {
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
  color: #777777;
}

.blog__detail {
  max-width: 900px;
  margin: 0 auto;
}

.blog__detail > h2 {
  font-size: 40px;
  line-height: 52px;
  font-weight: 700;
}

.blog__detail > p {
  font-size: 28px;
  line-height: 40px;
  font-weight: 400;
  color: var(--dark-black-color);
}

.keyword {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  max-width: 650px;
  margin: 0 auto;
}

.keyword > h5 {
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
}

.keyword .list {
  display: flex;
  justify-content: flex-start;
  gap: 8px;
  flex-wrap: wrap;
}

.keyword .list .item {
  border: 1px solid var(--primary-color);
  padding: 0 15.5px;
  font-size: 14px;
  line-height: 22px;
  font-weight: 700;
  color: var(--primary-color);
  white-space: nowrap;
  border-radius: 20px;
  transition: background-color 0.2s ease;
}
.keyword .list .item:hover {
  background-color: #D1D8FC;
  cursor: pointer;
}
.recommend {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin: 0 auto;
  width: 650px;
}

.recommend > h5 {
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
  color: var(--dark-black-color);
}

.recommend .recommend__container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border-radius: 8px;
  background-color: #f7f9fb;
  border: 2px solid #f7f9fb;
  transition: all 0.3s ease;
  margin-top: 24px;
}
.recommend .recommend__container:hover {
  border-color: var(--primary-color);
  box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.15);
}

.recommend .recommend__container > p {
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
}

.recommend .recommend__container .more {
  position: relative;
  color: #146ef5;
  line-height: 14px;
  line-height: 20px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
}
.recommend .recommend__container .more svg {
  transition: transform 0.3s ease; 
}
.recommend .recommend__container:hover .more svg {
  transform: translateX(6px);
}



.recommend .recommend__diagram {
  display: inline-flex;
}

.recommend .recommend__diagram > img {
  height: 50px;
}

.related {
  max-width: 650px;
  margin: 0 auto;
  width: 100%;
}

.related > h3 {
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
  color: var(--dark-black-color);
}

.related .list__post {
  display: flex;
  flex-direction: column;
}

.related .list__post .item__post {
  padding: 24px 0;
  background-color: #F7F9FB;
  border-radius: 8px;
  padding: 16px;
  margin-top: 24px;
}



.related .list__post .item__post .post__img {
  height: 50px;
  display: inline-flex;
  border-radius: 10px;
  overflow: hidden;
}

.related .list__post .item__post .post__img img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.related .list__post .item__post .post__content {
  padding-left: 12px;
}

.related .list__post .item__post .post__content .post__type {
  display: inline-block;
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  color: #858c94;
}

.related .list__post .item__post .post__content .post__title {
  margin-top: 8px;
  font-size: 20px;
  line-height: 32px;
  font-weight: 700;
}

.related .list__post .item__post .post__content .post_time {
  display: inline-block;
  margin-top: 8px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  color: #858c94;
}

.related .list__post .item__post .post__text {
  margin-top: 12px;
  font-size: 20px;
  line-height: 32px;
  color: var(--dark-black-color);
  font-weight: 700;
}
.related .list__post .item__post .arrow {
  display: inline-flex;
  align-items: center;
  margin-top: 12px;
  gap: 10px;
}
.related .list__post .item__post .arrow span {
   font-size: 16px;
   line-height: 22px;
   color: var(--primary-color)
}

.blog__detail *,.share *,.keyword *{
  color: var(--dark-black-color);
}

.blog__detail .template1 {
  display: inline-block;
  font-size: 20px;
  line-height: 32px;
  margin-top: 24px;
}

.blog__detail .template2 {
  margin-top: 40px;
  display: inline-block;
  font-size: 22px;
  line-height: 32px;
  font-weight: 700;
}

.blog__detail .template2:nth-child(1) {
  margin-top: 0;
}

.blog__detail .template3 {
  display: inline-block;
  font-size: 20px;
  line-height: 32px;
  font-weight: 700;
}

.head .head__wrapper {
  max-width: 650px;
  width: 100%;
}
.head .head__wrapper .item h3 {
  font-size: 22px;
  line-height: 32px;
  font-weight: 700;
}
.head .head__wrapper .item .text {
  font-size: 20px;
  line-height: 32px;
  margin-top: 24px;
}

.social__button {
  justify-content: flex-start;
  gap: 16px;
}
.blog__detail {
  font-size: 20px;
  width: 650px;
  margin: 0 auto;
}
.blog__detail h2 {
  font-size: 20px;
  line-height: 32px;
}
.blog__detail .item {
}
.blog__detail .item h3 {
  font-size: 22px;
  line-height: 32px;
  font-weight: 700;
}
.blog__detail .item .text {
  font-size: 20px;
  line-height: 32px;
  margin-top: 24px;
}

.share  {
  width: 650px;
  margin: 0 auto;
}
.share > h3 {
  font-size: 20px;
  line-height: 32px;
  font-weight: 700;
}

hr {
  height: 1px;
  background-color: #B4B4B4;
  width: 650px;
  margin: 0 auto;
}
.share .social__button {
  margin: 24px 0 0;
}


@media screen and (max-width: 800px) {
  .main__page .container__layout {
    padding: 100px 20px 50px;
  }

  .head .head__wrapper {
    margin: 0 40px;
    max-width: 100%;
    max-width: fit-content;
  }

  .head .slug {
    gap: 5px;
    min-width: max-content
  }

  .head .head__title,
  .head .head__description {
    margin-top: 16px;
  }

  .head .head__description {
    font-size: 22px;
    line-height: 32px;
  }

  .head .head__title {
    font-size: 35px;
    line-height: 45px;
  }

  .head .slug>p:nth-last-child() {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .social__button {
    margin: 30px 0;
  }

  .head .head__banner {

    max-height: 300px;
    height: 300px;
  }

  .main__page .container__layout{
    gap:30px
  }

  .blog__detail {
    max-width: 100%;
    margin: 0 40px;
    width: fit-content;
  }

  .blog__detail .template3{
    font-size: 18px;
  }


  .blog__detail .template2 {
    font-size: 20px;
    line-height: 32px;
    margin-top: 30px;
  }

  .blog__detail .template1 {
    margin-top: 16px;
    font-size: 18px;
    line-height: 24px;
  }

  .share .social__button {
    margin-top: 16px;
  }

  .related > h3 {
    font-size: 20px;
    line-height: 32px;
    margin-bottom: 16px;
  }

  .keyword{
    font-size: 20px;
    line-height: 32px;
    gap:16px
  }

  hr,.share,.keyword{
    max-width: 100%;
    padding: 0 40px;
    width: 100%;
  }

  .stories_hr,
  .cases_hr{
    width: calc(100% - 80px);
  }

  .keyword > h5 {
    font-size: 20px;
    line-height: 32px;
  }
  
  .recommend >h5{
    font-size: 20px;
    line-height: 32px;
  }

  .related {
    padding: 0 40px;
  }

  .related .list__post {
    row-gap: 16px;
  }
  
  .related .list__post .item__post{
    padding: 0 0 16px;
  }

  .related .list__post .item__post .post__content .post__title,
  .related .list__post .item__post .post__content .post_time {
    margin-top: 4px;
  }


}


@media screen and (max-width: 576px) {
  .main__page .container__layout {
    padding: 100px 20px 50px;
  }
  .head .head__wrapper {
    margin:  0;
    width: 100%;
  }

  .blog__detail {
    margin: 0;
  }

  hr, .share, .keyword {
    padding: 0;
  }

  .keyword .list{
    gap: 5px;
  }

  .stories_hr,
  .cases_hr{
    width: calc(100%);
  }
}