:root {
  --color-primary: #222;
  --color-primary-hover: #2f566d;
}
html {
  scroll-behavior: smooth;
}
body {
  font-family: Roboto Condensed, sans-serif;
}
.hover-title {
  transition: all 0.3s ease;
}
.hover-title:hover {
  color: var(--color-primary) !important;
}
.pagination {
  justify-content: flex-end;
  padding: 20px 0;
}
.pagination ul {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding-left: 0;
}
.pagination__item {
  align-items: center;
  border: 1px solid #ccc;
  border-radius: 5px;
  display: inline-block;
  display: flex;
  height: 40px;
  justify-content: center;
  margin-right: 5px;
  text-align: center;
  width: 45px;
}
@media (max-width: 768px) {
  .pagination__item {
    margin-bottom: 5px;
  }
}
.pagination__item:hover {
  background-color: var(--color-primary);
}
.pagination__item:hover .page-link {
  color: #fff;
}
.pagination__item .page-link {
  background: transparent;
  border: none;
  color: #000;
  display: block;
  font-size: 0.9375rem;
  font-weight: 500;
}
.pagination__item:last-child {
  margin-right: 0;
}
.pagination__item.page-current {
  background-color: var(--color-primary);
}
.pagination__item.page-current .page-link {
  color: #fff;
}
.pagination__item.disabled {
  border: none;
}
.pagination__item.disabled .page-link {
  opacity: 0.5;
}
.pagination__arrow {
  font-size: 0.625rem;
}
.pagination__arrow a {
  color: #000;
}
.pagination__arrow:hover a {
  color: #fff;
}
.text-one-row {
  -webkit-line-clamp: 1;
  line-clamp: 1;
}
.text-one-row,
.text-two-row {
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
}
.text-two-row {
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.choose-paginate .dropdown-menu.show {
  align-items: center;
  display: flex;
  padding: 10px;
}
.dark-theme .fa-fire-flame-curved {
  color: #fff;
}
.dark-theme .header-bottom {
  background-color: #393333 !important;
}
.dark-theme .header-bottom p {
  color: #fff !important;
}
.dark-theme main {
  background-color: #514f4f !important;
}
.dark-theme .author-name,
.dark-theme .category-name,
.dark-theme .story-name,
.dark-theme .title-head-name {
  color: #fff !important;
}
.dark-theme .card-custom {
  background-color: rgba(
    var(--bs-secondary-rgb),
    var(--bs-bg-opacity)
  ) !important;
}
.dark-theme .card-custom a,
.dark-theme .card-custom p,
.dark-theme .card-custom span,
.dark-theme .fa-solid.fa-angle-right {
  color: #fff !important;
}
.dark-theme .footer {
  background-color: #393333 !important;
}
.dark-theme .footer a,
.dark-theme .footer div,
.dark-theme .footer p,
.dark-theme .footer span,
.dark-theme .footer strong {
  color: #fff !important;
}
.dark-theme .footer .list-tag a {
  color: #393333 !important;
}
.dark-theme select.form-select {
  --bs-text-opacity: 1;
  --bs-bg-opacity: 1;
  background-color: rgba(
    var(--bs-secondary-rgb),
    var(--bs-bg-opacity)
  ) !important;
  color: rgba(var(--bs-white-rgb), var(--bs-text-opacity)) !important;
}
.dark-theme .hover-title:hover {
  color: #ff7f7f !important;
}
.dark-theme .story-detail,
.dark-theme .story-detail a {
  color: #fff !important;
}
.dark-theme .story-detail .info-more .info-more--more {
  background: linear-gradient(
    180deg,
    rgba(61, 60, 60, 0),
    rgba(61, 60, 60, 0.7) 21.88%,
    rgba(61, 60, 60, 0.95) 45.31%,
    #222 67.71%,
    #222
  );
}
.dark-theme .story-detail .info-more a,
.dark-theme .story-detail .info-more span {
  color: #fff !important;
}
.dark-theme .story-detail .info-more path,
.dark-theme .story-detail .info-more svg {
  fill: #fff;
}
.dark-theme .top-ratings a,
.dark-theme .top-ratings span {
  color: #fff !important;
}
.dark-theme .top-ratings__tab .list-group-item {
  background-color: #222;
}
.dark-theme .top-ratings__tab .list-group-item.active {
  background-color: #393333 !important;
}
.dark-theme .top-ratings__content .rating-item__number span {
  color: #000 !important;
}
.dark-theme .chapter-wrapper .chapter-content,
.dark-theme .chapter-wrapper p {
  color: #fff !important;
}
.dark-theme .chapter-actions ul {
  --bs-bg-opacity: 1;
  background-color: rgba(
    var(--bs-secondary-rgb),
    var(--bs-bg-opacity)
  ) !important;
}
.dark-theme .skeleton:empty:after {
  background-image: linear-gradient(
      90deg,
      hsla(0, 0%, 100%, 0),
      hsla(0, 0%, 100%, 0.6),
      hsla(0, 0%, 100%, 0)
    ),
    linear-gradient(#393333 var(--picture-height), transparent 0),
    linear-gradient(#645f5f var(--title-height), transparent 0),
    var(--author-skeleton), var(--rating-skeleton), var(--type-skeleton),
    linear-gradient(#645f5f var(--item-height), transparent 0);
}
.dark-theme .story-item-no-image svg {
  fill: #fff;
}
main {
  background: #e1e1e1;
  padding: 30px 0;
}
@media (max-width: 768px) {
  main {
    padding: 20px 0;
  }
}
:root {
  --item-width: 210px;
  --item-height: 390px;
  --item-padding: 20px;
  --item-skeleton: linear-gradient(#fff var(--item-height), transparent 0);
  --picture-height: 175px;
  --picture-width: 120px;
  --picture-position: center var(--item-padding);
  --picture-skeleton: linear-gradient(
    #eee var(--picture-height),
    transparent 0
  );
  --title-height: 15px;
  --title-width: 85%;
  --title-position: center
    calc(var(--picture-height) + var(--title-height) + 15px);
  --title-skeleton: linear-gradient(#eee var(--title-height), transparent 0);
  --author-height: 15px;
  --author-width: 70%;
  --author-position: center
    calc(
      var(--picture-height) + var(--title-height) + var(--author-height) + 30px
    );
  --author-skeleton: linear-gradient(#eee var(--title-height), transparent 0);
  --rating-height: 15px;
  --rating-width: 50%;
  --rating-position: center
    calc(
      var(--picture-height) + var(--title-height) + var(--author-height) +
        var(--rating-height) + 45px
    );
  --rating-skeleton: linear-gradient(#eee var(--title-height), transparent 0);
  --type-height: 15px;
  --type-width: 30%;
  --type-position: center
    calc(
      var(--picture-height) + var(--title-height) + var(--author-height) +
        var(--rating-height) + var(--type-height) + 60px
    );
  --type-skeleton: linear-gradient(#eee var(--title-height), transparent 0);
  --price-height: 15px;
  --price-width: 40%;
  --price-position: center
    calc(
      var(--picture-height) + var(--title-height) + var(--author-height) +
        var(--rating-height) + var(--type-height) + var(--price-height) + 75px
    );
  --price-skeleton: linear-gradient(#eee var(--title-height), transparent 0);
  --blur-width: 150px;
  --blur-size: var(--blur-width) var(--item-height);
}
.skeleton {
  height: var(--item-height);
  width: var(--item-width);
}
.skeleton:empty:after {
  animation: loading 1.5s infinite;
  background-image: linear-gradient(
      90deg,
      hsla(0, 0%, 100%, 0),
      hsla(0, 0%, 100%, 0.6),
      hsla(0, 0%, 100%, 0)
    ),
    var(--picture-skeleton), var(--title-skeleton), var(--author-skeleton),
    var(--rating-skeleton), var(--type-skeleton), var(--price-skeleton),
    var(--item-skeleton);
  background-position: -150% 0, var(--picture-position), var(--title-position),
    var(--author-position), var(--rating-position), var(--type-position),
    var(--price-position), 0 0;
  background-repeat: no-repeat;
  background-size: var(--blur-size), var(--picture-width) var(--picture-height),
    var(--title-width) var(--title-height),
    var(--author-width) var(--author-height),
    var(--rating-width) var(--rating-height),
    var(--type-width) var(--type-height), var(--price-width) var(--price-height),
    100% 100%;
  content: "";
  display: block;
  height: 100%;
  width: 100%;
}
@keyframes loading {
  to {
    background-position: 350% 0, var(--picture-position), var(--title-position),
      var(--author-position), var(--rating-position), var(--type-position),
      var(--price-position), 0 0;
  }
}
.theme_mode:checked {
  background-color: var(--bs-pink);
  border-color: var(--bs-pink);
}
.section-stories-follow-chapter-count__list {
  -moz-column-gap: 15px;
  column-gap: 15px;
  display: grid;
  row-gap: 15px;
}
@media (max-width: 575px) {
  .section-stories-follow-chapter-count__list {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 576px) {
  .section-stories-follow-chapter-count__list {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (min-width: 768px) {
  .section-stories-follow-chapter-count__list {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (min-width: 992px) {
  .section-stories-follow-chapter-count__list {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (min-width: 1200px) {
  .section-stories-follow-chapter-count__list {
    grid-template-columns: repeat(6, 1fr);
  }
}
.loading-full {
  align-items: center;
  background: rgba(0, 0, 0, 0.3);
  display: none;
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 9999;
}
.loading-full_icon,
.loading-full_progress {
  margin: 0 auto;
  text-align: center;
}
.loading-full_progress {
  background: #fff;
  padding: 15px 20px 20px;
  width: 80%;
}
@media (max-width: 992px) {
  .header .navbar-collapse {
    padding-bottom: 15px;
  }
}
.header__navbar {
  background-color: var(--color-primary);
}
@media (max-width: 992px) {
  .header__navbar {
    padding: 8px 0 !important;
  }
}
.header__navbar .nav-item {
  margin-right: 16px;
}
.header__navbar .nav-link {
  color: #fff;
}
@media (min-width: 768px) {
  .header__navbar .nav-link {
    padding: 15px 0;
  }
  .header__navbar .nav-link.show {
    background-color: var(--color-primary-hover);
  }
}
.header__form-search {
  position: relative;
}
.header__form-search button[type="submit"] {
  position: absolute;
  right: 0;
}
.header__form-search .search-result {
  max-height: 500px;
  overflow-y: auto;
  position: absolute;
  right: 0;
  top: 100%;
  width: 300px;
  z-index: 1021;
}
@media (max-width: 992px) {
  .header__form-search .search-result {
    width: 100%;
  }
}
.header__form-search .search-result a {
  text-decoration: none;
}
.header__form-search .no-result.search-result .card-body {
  padding: 15px !important;
}
.header__form-search .no-result.search-result .card-body .spinner-border {
  margin: auto;
}
.header-mobile {
  position: sticky;
  transition: all 0.3s linear;
  z-index: 9999;
}
.header-mobile.hide-scroll {
  top: -64px;
}
.header-mobile.show-scroll {
  box-sizing: border-box;
  top: 0;
  width: 100%;
}
.header-bottom {
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
}
.dropdown-menu-custom.show {
  display: grid;
  grid-template-columns: auto auto;
}
.settings-theme {
  width: 300px;
}
@media (max-width: 992px) {
  .settings-theme {
    width: unset;
  }
}
.section-list-category .list-category {
  -moz-column-gap: 8px;
  column-gap: 8px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  list-style: none;
  row-gap: 8px;
}
.section-stories-full__list {
  -moz-column-gap: 15px;
  column-gap: 15px;
  display: grid;
  row-gap: 15px;
}
@media (max-width: 575px) {
  .section-stories-full__list {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 460px) {
  .section-stories-full__list {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 576px) {
  .section-stories-full__list {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 768px) {
  .section-stories-full__list {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (min-width: 992px) {
  .section-stories-full__list {
    grid-template-columns: repeat(6, 1fr);
  }
}
@media (min-width: 1200px) {
  .section-stories-full__list {
    grid-template-columns: repeat(8, 1fr);
  }
}
.section-stories-hot__list {
  -moz-column-gap: 15px;
  column-gap: 10px;
  display: grid;
  row-gap: 10px;
}

/* ===== Mặc định: Mobile nhỏ (<576px) ===== */
.section-stories-hot__list {
  grid-template-columns: repeat(4, 1fr);
}

.section-stories-hot__list .story-item {
  max-height: 135px;
}

.section-stories-hot__list .story-item .story-name {
  font-size: 10px;
}

/* ===== Mobile lớn (≥576px) ===== */
@media (min-width: 576px) {
  .section-stories-hot__list {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ===== Tablet (≥768px) ===== */
@media (min-width: 768px) {
  .section-stories-hot__list {
    grid-template-columns: repeat(4, 1fr);
  }

  .section-stories-hot__list .story-item {
    max-height: 200px;
  }

  .section-stories-hot__list .story-item {
    font-size: inherit;
  }
}

/* ===== Desktop nhỏ (≥992px) ===== */
@media (min-width: 992px) {
  .section-stories-hot__list {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* ===== Desktop lớn (≥1200px) ===== */
@media (min-width: 1200px) {
  .section-stories-hot__list {
    grid-template-columns: repeat(8, 1fr);
  }
}

/* ===== Màn hình cực rộng (≥1400px) ===== */
@media (min-width: 1400px) {
  .section-stories-hot__list {
    grid-template-columns: repeat(10, 1fr);
  }
}

.story-item-full {
  max-width: 150px;
  position: relative;
}
@media (max-width: 460px) {
  .story-item-full {
    max-width: unset;
  }
}
.story-item-full__image {
  height: 100%;
  max-height: 220px;
  overflow: hidden;
}
.story-item-full__image:hover img {
  transform: scale(1.1);
}
.story-item-full__image img {
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  transition: all 0.3s ease;
}
.story-item-full__badge {
  left: 5px;
  position: absolute;
  top: 5px;
}
.story-item-full__name {
  background-color: rgba(0, 0, 0, 0.6);
  bottom: 0;
  display: block;
  margin: 2px 0 0;
  padding: 5px;
  position: absolute;
  text-align: center;
  text-shadow: 1px 2px 2px #000;
  width: 100%;
}
.story-item-full__name a {
  color: #f4f4f4;
  font-size: 0.75rem;
}
.story-item-list__image {
  max-width: 100px;
}
.story-item-list__chapter {
  position: absolute;
  right: 0;
}
@media (max-width: 992px) {
  .story-item-list__chapter {
    position: unset;
  }
}
.story-item-no-image {
  align-items: center;
  border-bottom: 1px dashed #ccc;
  display: flex;
}
.story-item-no-image:last-child {
  border-bottom: 0;
}
.story-item-no-image__name {
  border-right: 1px dashed #ccc;
  padding: 10px 0;
  width: 50%;
}
.story-item-no-image__name i {
  font-size: 20px;
}
@media (max-width: 992px) {
  .story-item-no-image__name {
    width: 70%;
  }
}
.story-item-no-image__categories {
  border-right: 1px dashed #ccc;
  padding: 10px 0;
  width: 35%;
}
.story-item-no-image__chapters {
  padding: 10px 0;
  width: 15%;
}
@media (max-width: 992px) {
  .story-item-no-image__chapters {
    width: 30%;
  }
}
.story-item-no-image__updated-at {
  padding: 10px 0;
  width: 15%;
}
.story-item {
  max-width: 150px;
}
.story-item:hover img {
  transform: scale(1.1);
}
.story-item a {
  height: 100%;
  position: relative;
}
.story-item__image {
  height: 100%;
  overflow: hidden;
}
.story-item__image img {
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  transition: all 0.3s ease;
  width: 100%;
}
.story-item__name {
  background-color: rgba(0, 0, 0, 0.6);
  bottom: 0;
  color: #f4f4f4;
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  margin: 2px 0 0;
  padding: 5px;
  position: absolute;
  text-align: center;
  text-shadow: 1px 2px 2px #000;
  width: 100%;
}
.story-item .list-badge {
  display: flex;
  flex-direction: column;
  left: 5px;
  position: absolute;
  top: 5px;
}
.story-item .list-badge .badge {
  margin-bottom: 5px;
}
.story-item .list-badge .badge:last-child {
  margin-bottom: 0;
}
@media (max-width: 992px) {
  .chapter-content {
    font-size: 1.25rem;
  }
}
.chapter-content p {
  margin-bottom: 10px;
}
.chapter-actions-mobile {
  background: var(--color-primary);
  bottom: -150px;
  padding: 7px 0;
  position: fixed;
  transition: all 0.3s ease;
  width: 100%;
}
@media (min-width: 992px) {
  .chapter-actions-mobile {
    display: none !important;
  }
}
.chapter-actions-mobile.show {
  bottom: 0;
}
.chapter-actions .dropdown-menu.show,
.chapter-actions-mobile .dropdown-menu.show {
  max-height: 300px;
  overflow-y: scroll;
}
.story-detail__top--image {
  position: sticky;
  top: 10px;
}
.story-detail__top--image .book-3d {
  box-shadow: 5px 5px 20px #333;
}
@media (min-width: 992px) {
  .story-detail__top--image .book-3d {
    margin: 0;
    outline: 1px solid transparent;
    -moz-perspective: 300px;
    position: relative;
    transform: perspective(300px) rotateY(-3deg);
    -moz-transform: rotateY(-3deg);
    -webkit-transform: perspective(300) rotateY(-3deg);
    z-index: 1;
  }
}
@media (max-width: 992px) {
  .story-detail__top--image .book-3d {
    margin: 0 auto 15px;
    width: 70%;
  }
}
@media (min-width: 992px) {
  .story-detail__top--image .book-3d:before {
    background-color: #000;
    left: 7%;
    width: 100%;
  }
  .story-detail__top--image .book-3d:after,
  .story-detail__top--image .book-3d:before {
    content: " ";
    height: 97%;
    position: absolute;
    top: 2px;
    z-index: -1;
  }
  .story-detail__top--image .book-3d:after {
    background-color: #efefef;
    box-shadow: inset 0 0 5px #aaa;
    left: 100%;
    transform: perspective(300px) rotateY(20deg);
    -moz-transform: rotateY(20deg);
    -webkit-transform: perspective(300) rotateY(20deg);
    width: 4%;
  }
}
.story-detail__top--image .book-3d img {
  ertical-align: middle;
  max-width: 100%;
}
@media (min-width: 992px) {
  .story-detail__top--image .book-3d img {
    border: 1px solid #000;
    border-left-width: 5px;
    height: auto;
    position: relative;
    z-index: 1;
  }
}
@media (max-width: 992px) {
  .story-detail__top--image {
    position: unset;
    top: unset;
  }
}
.story-detail__top--desc {
  max-height: 300px;
  overflow: hidden;
}
.story-detail__top--desc.show-full {
  max-height: none !important;
}
.story-detail__bottom--info {
  font-size: 0.875rem;
}
@media (max-width: 576px) {
  .story-detail__list-chapter--list__item ul {
    margin-bottom: 0;
  }
}
.story-detail .rate-story {
  align-items: center;
  display: flex;
  flex-direction: column;
}
.info-more {
  position: relative;
}
.info-more a {
  align-items: center;
  cursor: pointer;
  display: none;
  justify-content: center;
}
.info-more a span {
  color: #2c2c37;
  margin-right: 13px;
}
.info-more a.active {
  display: flex;
}
.info-more div {
  display: none;
}
.info-more--more {
  align-items: center;
  background: linear-gradient(
    180deg,
    hsla(0, 0%, 100%, 0),
    hsla(0, 0%, 100%, 0.7) 21.88%,
    hsla(0, 0%, 100%, 0.95) 45.31%,
    #fff 67.71%,
    #fff
  );
  bottom: 0;
  cursor: pointer;
  display: flex;
  height: 50px;
  justify-content: center;
  position: absolute;
  scroll-margin-top: 100px;
  width: 100%;
}
.info-more--more.active {
  display: flex;
}
.top-ratings__tab .list-group-item.active {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}
.top-ratings__content ul {
  list-style: none;
  padding-left: 0;
}
.top-ratings__content .rating-item {
  border-bottom: 1px dashed #ccc;
  padding-bottom: 5px;
}
.top-ratings__content .rating-item:last-child {
  border-bottom: 0;
}
.top-ratings__content .rating-item__number {
  align-items: center;
  display: flex;
  height: 30px;
  justify-content: center;
  margin-right: 10px;
  max-width: 30px;
  width: 100%;
}
.top-ratings__content .rating-item__number span {
  font-size: 0.875rem;
  font-weight: 600;
  margin-top: 2px;
}
.top-ratings__content .rating-item__story--name {
  color: var(--color-primary);
  font-weight: 600;
}
.top-ratings__content .rating-item__story--categories {
  font-size: 0.875rem;
}