@media (min-width: 1025px) {
  .outer.subpage .nav-bar.nav-bg {
    background: url("../img.zing.vn/upload/tlo/source/Web/2025/Main/nav-bg.png") center top no-repeat;
  }

  .outer.subpage .page-header {
    background: url("../images/themes/page-header-sub.jpg") center top no-repeat;
    height: 1149px;
  }

  .outer.subpage #mainContent {
    margin-top: -289px;
    position: relative;
    overflow: hidden;
    background:
      url("../images/themes/bg-main-sub.jpg?v=23") center -52px / 100% auto no-repeat,
      linear-gradient(180deg, #fffaf0 0%, #fff8ea 68%, #f4ecd8 100%) center top / 100% 100% no-repeat !important;
    background-color: #f3ead0;
    padding-top: 0;
    min-height: 986px;
  }

  .outer.subpage #mainContent::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 92px;
    bottom: 0;
    background: url("../images/themes/bg-main-sub-body.jpg?v=23") center top / 100% 100% no-repeat;
    pointer-events: none;
    z-index: 0;
  }

  .outer.subpage #mainContent .container {
    position: relative;
    z-index: 1;
    min-height: 986px;
    height: auto;
    margin-bottom: 0;
    padding-bottom: 90px;
  }

  .outer.subpage .nav-bar__inner .rating {
    left: 84px;
    top: 10px;
    width: 190px;
    height: 60px;
    z-index: 4;
  }
}

.outer.subpage .block__home-gallery,
.outer.subpage .block__tuyethoc,
.outer.subpage .aside-right,
.outer.subpage .block__contact,
.outer.subpage .top-download-game,
.outer.subpage .nav-bar__inner .hotline,
.outer.subpage .block-post .post-list__wrap-img img,
.outer.subpage .list-event__wrap-img {
  display: none;
}

.outer.subpage .block-post .post-list__item,
.outer.subpage .list-event__item {
  display: block;
}

.outer.subpage .block-post .post-list__content,
.outer.subpage .list-event__content {
  width: 100%;
}

.outer.subpage .ranking .tabbxh ul li {
  margin: 0 auto;
}

.outer.subpage .main-content__title h1::before {
  background: url("../images/themes/bg-title-left.png") center top no-repeat !important;
  filter: hue-rotate(180deg);
}

.outer.subpage .main-content__title h1::after {
  background: url("../images/themes/bg-title-right.png") center top no-repeat !important;
  filter: hue-rotate(180deg);
}

.outer.subpage .app-icon {
  background: url("../images/logo-CTCX.png") 0 0 no-repeat;
  background-position: unset;
}

.outer.subpage .page-header .logo {
  background: url("../img.zing.vn/upload/tlo/source/Web/2025/Main/logo.png") center top no-repeat;
  left: 2%;
  margin-left: 0;
}

@media (max-width: 1024px) {
  .outer.subpage #mainContent {
    position: relative;
    overflow: hidden;
    background:
      url("../images/themes/bg-main-sub.jpg?v=23") center -26px / 100% auto no-repeat,
      linear-gradient(180deg, #fffaf0 0%, #fff8ea 68%, #f4ecd8 100%) center top / 100% 100% no-repeat !important;
    background-color: #f3ead0;
    padding-top: 0;
    min-height: calc(100vh - 100px);
  }

  .outer.subpage #mainContent::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100px;
    bottom: 0;
    background: url("../images/themes/bg-main-sub-body.jpg?v=23") center top / 100% 100% no-repeat;
    pointer-events: none;
    z-index: 0;
  }

  .outer.subpage #mainContent .container {
    position: relative;
    z-index: 1;
    height: auto;
    margin-bottom: 0;
    padding-bottom: 64px;
  }
}

@media (min-width: 1025px) {
  .outer.subpage .main-content__title {
    height: 92px;
    padding-top: 10px;
    margin-bottom: 34px;
  }
}

.outer.subpage .main-content__title h1 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  min-width: 0;
  color: #fff2c9 !important;
  text-shadow: 0 2px 2px rgba(0, 0, 0, 0.55);
  white-space: nowrap;
}

.outer.subpage .main-content__title h1::before,
.outer.subpage .main-content__title h1::after {
  flex: 0 0 203px;
  margin-right: 0;
  margin-left: 0;
}

.outer.subpage .main-content__title h1 > span {
  display: block;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 820px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.article-detail {
  padding: 30px 28px 80px;
  color: #1c3834;
}

.article-detail .article-meta {
  display: inline-block;
  margin: 0 0 28px;
  padding: 8px 14px;
  border-left: 4px solid #9f1f1f;
  border-radius: 4px;
  background: rgba(255, 248, 225, 0.78);
  color: #5d351c;
  font-size: 18px;
  line-height: 1.5;
  text-shadow: none;
}

.article-detail .article-meta strong {
  color: #9f1f1f;
  text-shadow: none;
}

.article-detail .article-body,
.article-detail .article-body p,
.article-detail .article-body li {
  color: #1c3834;
  font-size: 18px;
  line-height: 1.75;
  text-shadow: none;
}

.article-detail .article-body * {
  box-sizing: border-box;
  text-shadow: none;
}

.article-detail .article-body p {
  margin: 0 0 16px;
  padding: 0;
}

.article-detail .article-body strong,
.article-detail .article-body b {
  color: #9f1f1f;
}

.article-detail .article-body h1,
.article-detail .article-body h2,
.article-detail .article-body h3,
.article-detail .article-body h4,
.article-detail .article-body h5 {
  background: none;
  color: #9f1f1f;
  font-weight: 700;
  line-height: 1.35;
  padding-left: 0;
  margin: 28px 0 16px;
}

.article-detail .article-body h1 {
  font-size: 28px;
  text-align: center;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(181, 139, 31, 0.75);
  padding-bottom: 12px;
}

.article-detail .article-body h2,
.article-detail .article-body h4 {
  font-size: 23px;
}

.article-detail .article-body h3,
.article-detail .article-body h5 {
  font-size: 21px;
  margin-left: 0;
}

.article-detail .article-body h2 ~ p,
.article-detail .article-body h2 ~ ul,
.article-detail .article-body h2 ~ div,
.article-detail .article-body h4 ~ p,
.article-detail .article-body h4 ~ ul,
.article-detail .article-body h4 ~ div,
.article-detail .article-body h3 ~ p,
.article-detail .article-body h3 ~ ul,
.article-detail .article-body h3 ~ div,
.article-detail .article-body h5 ~ p,
.article-detail .article-body h5 ~ ul,
.article-detail .article-body h5 ~ div {
  margin-left: 0;
}

.article-detail .article-body ul,
.article-detail .article-body ol {
  margin: 12px 0 20px 30px;
  padding: 0;
}

.article-detail .article-body ul > li,
.article-detail .article-body ol > li {
  margin-bottom: 10px;
  padding-left: 6px;
  text-align: left;
  background: none;
}

.article-detail .article-body ul > li {
  list-style-type: square;
}

.article-detail .article-body ol > li {
  list-style-type: decimal;
}

.article-detail .article-body img {
  max-width: 100%;
  height: auto;
}

.article-detail .article-body table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  border: 1px solid #d0a64b;
}

.article-detail .article-body table th {
  background: #951f1f;
  color: #fff;
}

.article-detail .article-body table td,
.article-detail .article-body table th {
  border-color: #d0a64b;
  padding: 10px 14px;
  text-align: left;
}

.article-detail .article-body table tr:nth-child(odd) {
  background: rgba(255, 255, 255, 0.82);
}

.article-detail .article-body table tr:nth-child(even) {
  background: rgba(232, 241, 247, 0.82);
}

.block-post .post-list__content {
  min-width: 0;
}

.block-post .post-list__header {
  gap: 24px;
}

.block-post .post-list__title {
  min-width: 0;
  flex: 1 1 auto;
}

.block-post .post-list__title a {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.block-post .post-list__header time {
  flex: 0 0 150px;
  text-align: right;
}

@media (max-width: 1024px) {
  .outer.subpage .main-content__title h1 {
    gap: 16px;
    font-size: 34px;
    line-height: 56px;
    width: 100%;
    padding: 0 18px;
    box-sizing: border-box;
  }

  .outer.subpage .main-content__title h1::before,
  .outer.subpage .main-content__title h1::after {
    display: none;
  }

  .outer.subpage .main-content__title h1 > span {
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
  }

  .article-detail {
    padding: 24px 28px 64px;
  }

  .article-detail .article-body table {
    display: block;
    overflow-x: auto;
  }

  .block-post .post-list__header {
    align-items: flex-start;
    gap: 10px;
  }

  .block-post .post-list__header time {
    flex-basis: 130px;
    font-size: 18px;
  }
}