/* Base Styles */
:root {
  --primary-color: #d7edfa;
  --secondary-color: #107fed;
  --light-pink: #fce4ec;
  --dark-pink: #c13c54;
  --text-color: #333;
  --white: #fff;
  --background-gradient: linear-gradient(
    to bottom,
    rgba(85, 31, 63, 1),
    rgba(220, 88, 109, 1),
    rgba(255, 178, 148, 1)
  );
  --background-color: #ffe7d0;
  --third-color: #fb9590;
  --fourth-color: #ff6162;
  --hover-color: #a5281b;
  --background-secondary: #ffe0c5;
  --background-dark: #373a40;
  --background-dark-light: #686d76;
  --background-black: #000000;
}

/* global styles */
body {
  background: #d7edfa;
  position: relative;
  z-index: 1;
}
body.index {
}
body.index .anh-nen-body,
body.index .anh-nen-body-image {
  opacity: 0;
}
.anh-nen-body {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--primary-color);
  z-index: -2;
  pointer-events: none;
}

.background-gradiant {
  background: linear-gradient(90deg, #107fed 0, #094887 100%); /* W3C */
}

/* Header Styles */
.hydrosite-mong-truyen-header {
  background-color: var(--primary-color);
  /* background: transparent; */
  color: var(--white);
  padding: 12px 0;
  position: sticky;
  top: 0;
  z-index: 1000;
  transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
}
.index .hydrosite-mong-truyen-header {
  background: var(--primary-color);
}

.hydrosite-mong-truyen-logo {
  font-family: "Brush Script MT", cursive;
  font-size: 28px;
  font-style: italic;
}

.hydrosite-mong-truyen-search {
  position: relative;
  max-width: 300px;
  margin: 0 auto;
}

.hydrosite-mong-truyen-search input {
  width: 100%;
  padding: 6px 40px 6px 10px;
  border: none;
  border-radius: 4px;
}

.hydrosite-mong-truyen-search button {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  background-color: var(--secondary-color);
  border: none;
  color: var(--white);
  padding: 0 10px;
  border-top-left-radius: 9px;
  border-bottom-left-radius: 9px;
  cursor: pointer;
  box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px,
    rgba(17, 17, 26, 0.05) 0px 8px 32px;
}

.hydrosite-mong-truyen-user a {
  text-transform: uppercase;
  font-weight: 500;
}

.hydrosite-mong-truyen-user {
  display: inline-block;
}

.hydrosite-mong-truyen-mobile-menu {
  display: inline-block;
}

.hydrosite-mong-truyen-mobile-menu button {
  background: none;
  border: none;
  color: #0080ff;
  font-size: 18px;
  cursor: pointer;
}
.hydrosite-mong-truyen-user i {
  font-size: 18px;
}
.hydrosite-mong-truyen-search form {
  position: relative;
  overflow: hidden;
  border-radius: 9px;
  -webkit-border-radius: 9px;
  -moz-border-radius: 9px;
  -ms-border-radius: 9px;
  -o-border-radius: 9px;
}

.hydrosite-mong-truyen-logo img {
  transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
}
body.index .hydrosite-mong-truyen-logo img {
}
/* Navigation Styles */
.hydrosite-mong-truyen-nav {
  background: linear-gradient(90deg, #107fed 0, #094887 100%); /* W3C */
  color: var(--white);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.hydrosite-mong-truyen-menu-item-link {
  color: #0080ff;
  font-family: var(--title-font);
  font-weight: 500;
  font-size: 1.1rem;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  padding: 10px 30px;
  display: inline-flex;
}

.hydrosite-mong-truyen-menu .hydrosite-mong-truyen-menu-item-link {
  color: #fff;
}

.hydrosite-mong-truyen-menu-item.active .hydrosite-mong-truyen-menu-item-link {
  color: var(--white);
  background: #3d9eff;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
}
.hydrosite-mong-truyen-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.hydrosite-mong-truyen-menu li {
  transition: background-color 0.3s;
}

.hydrosite-mong-truyen-menu li:hover a {
  background-color: #3d9eff;
  color: var(--white);
}

.hydrosite-mong-truyen-mobile-nav {
  display: none;
  background-color: var(--primary-color);
  padding: 15px;
}

.hydrosite-mong-truyen-mobile-nav.active {
  display: block;
}

.hydrosite-mong-truyen-mobile-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.hydrosite-mong-truyen-mobile-nav li {
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.hydrosite-mong-truyen-mobile-search {
  margin-top: 15px;
}
.menu-mobile-offcanvas {
  background-color: var(--primary-color);
  color: var(--white);
}
.menu-mobile-offcanvas .offcanvas-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.menu-mobile-offcanvas .offcanvas-header .btn-close {
  color: var(--white);
}
.menu-mobile-offcanvas .offcanvas-body {
  padding: 0;
}
.menu-mobile-offcanvas .hydrosite-mong-truyen-menu {
  padding: 0;
  margin: 0;
  list-style: none;
}
.menu-mobile-offcanvas .hydrosite-mong-truyen-menu-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.menu-mobile-offcanvas .hydrosite-mong-truyen-menu-item-link {
  padding: 15px 15px;
  font-size: 1.3rem;
  display: block;
  text-transform: uppercase;
}

body.index .hydrosite-mong-truyen-header.active {
  background: var(--primary-color);
}
/* .hydrosite-mong-truyen-header.active .hydrosite-mong-truyen-logo img {
  max-width: 150px;
  transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
} */
.hydrosite-mong-truyen-header.active {
  box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px;
  padding: 5px 0;
  transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
}
.hydrosite-avater-login {
  overflow: hidden;
  min-width: 50px;
  min-height: 50px;
  max-width: 50px;
  max-height: 50px;
  /* border: 2px solid var(--primary-color); */
  position: relative;
}
.hydrosite-avater-login a,
.hydrosite-avater-login img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}
.hydrosite-avater-login .avatar {
  z-index: 1;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  transform: scale(0.8) translateY(5%);
  -webkit-transform: scale(0.8) translateY(5%);
  -moz-transform: scale(0.8) translateY(5%);
  -ms-transform: scale(0.8) translateY(5%);
  -o-transform: scale(0.8) translateY(5%);
}
.hydrosite-avater-login .frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}
.hydrosite-avater-login-dropdown-menu {
  background: var(--white);
  color: var(--text-color);
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
    rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}
.hydrosite-avater-login-dropdown-menu .dropdown-item {
  color: var(--text-color);
  outline: none;
  border: none;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
}
.hydrosite-avater-login-dropdown-menu .dropdown-item:hover {
  background: var(--primary-color);
  color: var(--white);
}
.hydrosite-avater-login-info-text {
  font-family: var(--title-font);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text-color);
}
body.index .hydrosite-avater-login-info-text {
}
.hydrosite-avater-rank-info-text {
  font-size: 0.9rem;
}
.btn-search-mobile {
  background: transparent;
  border: none;
  outline: none;
  font-size: 1.5rem;
  color: #0080ff;
}

.btn:focus {
  box-shadow: none;
}

/* result search mobile form start */
.mdv-header-find-form-mobile {
  top: 60px;
  opacity: 0;
  visibility: hidden;
  position: fixed;
  left: 5%;
  width: 90%;
  z-index: 1000;
  background-color: var(--background-color);
  border-radius: 10px;
  padding: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transform: translateY(-10px) scale(0.9);
  -webkit-transform: translateY(-10px) scale(0.9);
  -moz-transform: translateY(-10px) scale(0.9);
  -ms-transform: translateY(-10px) scale(0.9);
  -o-transform: translateY(-10px) scale(0.9);
}
.mdv-header-find-form-mobile.active {
  top: 60px;
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  -webkit-transform: translateY(0) scale(1);
  -moz-transform: translateY(0) scale(1);
  -ms-transform: translateY(0) scale(1);
  -o-transform: translateY(0) scale(1);
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
}
.mdv-header-find-form-mobile ul {
  padding: 0;
}
.mdv-header-find-form-mobile ul li {
  padding: 0;
}
.mdv-header-find-form-mobile .text-search-mobile {
  width: 100%;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid var(--border-color);
}
.truyen-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.35);
  z-index: 999;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  -moz-backdrop-filter: blur(10px);
  -ms-backdrop-filter: blur(10px);
  -o-backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  pointer-events: none;
}
.truyen-overlay.active {
  opacity: 1;
  visibility: visible;
  transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  pointer-events: auto;
}

/* result search mobile form end */
/* header end */

/* Banner Styles */
.hydrosite-mong-truyen-banner {
  background: linear-gradient(to bottom, #fce4ec, #f8bbd0);
  padding: 30px 0;
  position: relative;
  overflow: hidden;
  text-align: center;
}

.hydrosite-mong-truyen-banner-content {
  position: relative;
}

.hydrosite-mong-truyen-banner-author {
  font-size: 12px;
  color: var(--primary-color);
  margin-bottom: 5px;
}

.hydrosite-mong-truyen-banner-title {
  font-family: "Brush Script MT", cursive;
  font-size: 48px;
  line-height: 1.2;
  color: #9c27b0;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

.hydrosite-mong-truyen-banner-image {
  position: absolute;
  right: 33%;
  top: 50%;
  transform: translateY(-50%) rotate(-6deg);
  width: 80px;
  height: 100px;
  background-color: var(--white);
  padding: 5px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.hydrosite-mong-truyen-banner-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: rotate(3deg);
}
.hydrosite-mong-truyen-swiper-item {
  overflow: hidden;
  --bs-aspect-ratio: calc(9 / 29 * 100%);
}
.hydrosite-mong-truyen-swiper-item a,
.hydrosite-mong-truyen-swiper-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.overlay-slider {
  position: absolute;
  top: 0%;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  background: linear-gradient(
    180deg,
    rgba(133, 46, 78, 0) 50%,
    var(--primary-color) 95%
  );
  pointer-events: none;
}
/* slider end */

/* Main Content Styles */
.hydrosite-mong-truyen-main {
  padding: 30px 0;
  padding-top: 0;
}

/* Book Card Styles */
.hydrosite-mong-truyen-book-card {
  background-color: var(--white);
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.35s;
  -webkit-transition: all 0.35s;
  -moz-transition: all 0.35s;
  -ms-transition: all 0.35s;
  -o-transition: all 0.35s;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  -ms-border-radius: 12px;
  -o-border-radius: 12px;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

.hydrosite-mong-truyen-book-card:hover {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  transform: translateY(-5px);
  -webkit-transform: translateY(-5px);
  -moz-transform: translateY(-5px);
  -ms-transform: translateY(-5px);
  -o-transform: translateY(-5px);
  transition: all 0.35s ease;
  -webkit-transition: all 0.35s ease;
  -moz-transition: all 0.35s ease;
  -ms-transition: all 0.35s ease;
  -o-transition: all 0.35s ease;
}

.hydrosite-mong-truyen-book-thumbnail {
  overflow: hidden;
  min-height: 100%;
  --bs-aspect-ratio: 150%;
  border-radius: 12px;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  -ms-border-radius: 12px;
  -o-border-radius: 12px;
  box-shadow: rgba(0, 0, 0, 0.45) 0px 0.0625em 0.0625em,
    rgba(0, 0, 0, 0.45) 0px 0.125em 0.5em,
    rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
}
.book-border {
  z-index: 3;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(2, 0, 36, 0.39),
    rgba(0, 0, 0, 0.5) 1.83%,
    hsla(0, 0%, 100%, 0.36) 3.21%,
    rgba(0, 0, 0, 0.33) 4.72%,
    rgba(247, 254, 255, 0.28) 9.84%,
    hsla(0, 0%, 100%, 0) 47.85%
  );
  border-radius: 12px;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  -ms-border-radius: 12px;
  -o-border-radius: 12px;
}
.hydrosite-mong-truyen-book-thumbnail img,
.hydrosite-mong-truyen-book-thumbnail a {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hydrosite-mong-truyen-book-tag {
  position: absolute;
  top: 8px;
  left: 8px;
  background: red;
  color: var(--white);
  font-size: 10px;
  padding: 2px 5px;
  padding-left: 10px;
  z-index: 1;
  border-radius: 2px;
}

.hydrosite-mong-truyen-book-info {
  padding: 10px;
  overflow: hidden;
}

.hydrosite-mong-truyen-book-title {
  /* font-size: 16px; */
  font-size: clamp(1rem, 1rem + 0vw, 1rem);
  font-weight: 600;
  margin: 0 0 5px;
  font-family: var(--title-font);
  transition: color 0.3s;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-transition: color 0.3s;
  -moz-transition: color 0.3s;
  -ms-transition: color 0.3s;
  -o-transition: color 0.3s;
  color: var(--text-color);
}
.tim-tac-gia .hydrosite-mong-truyen-book-title {
  font-size: clamp(1rem, 0.9385rem + 0.3077vw, 1.2rem);
}

.hydrosite-mong-truyen-book-title:hover {
  color: var(--dark-pink);
}

.hydrosite-mong-truyen-book-author,
.hydrosite-mong-truyen-book-views,
.hydrosite-mong-truyen-book-chapters {
  font-size: clamp(0.8rem, 0.7692rem + 0.1538vw, 0.9rem);
  color: #666;
  margin-bottom: 3px;
  transition: color 0.3s ease;
  -webkit-transition: color 0.3s ease;
  -moz-transition: color 0.3s ease;
  -ms-transition: color 0.3s ease;
  -o-transition: color 0.3s ease;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hydrosite-mong-truyen-book-author:hover {
  color: var(--hover-color);
  transition: color 0.3s ease;
  -webkit-transition: color 0.3s ease;
  -moz-transition: color 0.3s ease;
  -ms-transition: color 0.3s ease;
  -o-transition: color 0.3s ease;
}
/* Small Book Styles (for Completed Stories) */
.hydrosite-mong-truyen-small-book {
  position: relative;
  background-color: transparent;
  z-index: 1;
}

.hydrosite-mong-truyen-small-book:hover {
  transform: scale(1.05);
}

.hydrosite-mong-truyen-small-book-price {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #e91e63;
  color: var(--white);
  font-size: 10px;
  padding: 2px 5px;
  z-index: 1;
}

.hydrosite-mong-truyen-small-book-hot {
  position: absolute;
  top: 0;
  right: 0;
  background-color: #ff9800;
  color: var(--white);
  font-size: 10px;
  padding: 2px 5px;
  z-index: 1;
}

.hydrosite-mong-truyen-small-book-title {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: #000;
  font-family: var(--title-font);
  font-weight: 600;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
}
.hydrosite-mong-truyen-small-book-title:hover {
}

.hydrosite-mong-truyen-small-book-author,
.hydrosite-mong-truyen-small-book-views {
  color: #0d5c72;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 50%;
}

/* Latest Book Styles */
.hydrosite-mong-truyen-latest-book {
  background-color: var(--white);
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s;
}

.hydrosite-mong-truyen-latest-book:hover {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.hydrosite-mong-truyen-latest-book-thumbnail {
  position: relative;
  text-align: center;
  padding: 10px;
}

.hydrosite-mong-truyen-latest-book-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: #ff9800;
  color: var(--white);
  font-size: 10px;
  padding: 2px 5px;
  z-index: 1;
}

.hydrosite-mong-truyen-latest-book-info {
  padding: 10px;
  border-top: 1px solid #eee;
}

.hydrosite-mong-truyen-latest-book-title {
  font-size: 14px;
  font-weight: bold;
  margin: 0 0 5px;
}

.hydrosite-mong-truyen-latest-book-author,
.hydrosite-mong-truyen-latest-book-views,
.hydrosite-mong-truyen-latest-book-chapters {
  font-size: 12px;
  color: #666;
  margin-bottom: 3px;
}

/* Categories Styles */
.hydrosite-mong-truyen-categories {
  background-color: rgba(255, 255, 255, 0.25);
  border-radius: 12px;
  padding: 15px;
  margin-bottom: 20px;
  overflow: hidden;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  -ms-border-radius: 12px;
  -o-border-radius: 12px;
  border: 1px solid #107fed;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

.hydrosite-mong-truyen-categories-title {
  color: var(--white);
  padding: 8px 15px;
  /* margin: -15px -15px 15px; */
  font-size: clamp(0.8rem, 0.2795rem + 1.0829vw, 1.2rem);
  font-weight: 700;
  text-transform: uppercase;
  font-family: var(--title-font);
  border-bottom: 1px solid #ffbb94;
  position: relative;
}
.hydrosite-mong-truyen-categories-title::before {
  position: absolute;
  content: "";
  width: 20%;
  height: 4px;
  background-color: #ffbb94;
  bottom: -2px;
  left: 10%;
  z-index: 1;
}

.hydrosite-mong-truyen-categories-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.hydrosite-mong-truyen-categories-list li {
  margin-bottom: 5px;
}

/* Recently Read Styles */
.hydrosite-mong-truyen-recently-read {
  background-color: rgba(255, 255, 255, 0.25);
  border-radius: 12px;
  padding: 15px;
  margin-bottom: 20px;
  overflow: hidden;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  -ms-border-radius: 12px;
  -o-border-radius: 12px;
  border: 1px solid #107fed;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

.hydrosite-mong-truyen-recently-read-title {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding-bottom: 10px;
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 18px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--white);
}

/* Footer Styles */
.hydrosite-mong-truyen-footer {
}

.hydrosite-mong-truyen-footer-content-box {
  position: relative;
  padding: 40px 40px 20px 40px;
}
.svg-footer {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
}

.hydrosite-mong-truyen-footer-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 20px;
}

.hydrosite-mong-truyen-footer-logo {
  font-family: "Brush Script MT", cursive;
  font-size: 28px;
  margin-bottom: 15px;
}

.hydrosite-mong-truyen-social {
  display: flex;
  justify-content: end;
}

.hydrosite-mong-truyen-social a {
  display: inline-block;
  width: 30px;
  height: 30px;
  background-color: var(--white);
  color: var(--primary-color);
  border-radius: 50%;
  text-align: center;
  line-height: 30px;
  margin-right: 10px;
}

.hydrosite-mong-truyen-footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.hydrosite-mong-truyen-footer-links li {
  margin-bottom: 10px;
}

.hydrosite-mong-truyen-footer-links i {
  font-size: 10px;
  margin-right: 5px;
}

.hydrosite-mong-truyen-fanpage {
  max-width: 100%;
  overflow: hidden;
}

.hydrosite-mong-truyen-copyright {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* truyện đề cử start */
.hydrosite-mong-truyen-section-truyen-de-cu {
  position: relative;
  z-index: 1;
}
.hydrosite-mong-truyen-section-truyen-de-cu .container-fluid {
  position: relative;
  z-index: 3;
}

.hydrosite-mong-truyen-section-title {
  font-family: var(--title-font);
  font-weight: 700;
  font-size: clamp(1.3rem, 1.1462rem + 0.7692vw, 1.8rem);
  color: #000;
  text-transform: uppercase;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0;
}
.section-title-icon {
  width: 32px;
  height: 32px;
  object-fit: contain;
  transform: translateY(-4px);
  -webkit-transform: translateY(-4px);
  -moz-transform: translateY(-4px);
  -ms-transform: translateY(-4px);
  -o-transform: translateY(-4px);
}
.hydrosite-navigation-button {
  width: 70px;
  height: 70px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  z-index: 99;
  cursor: pointer;
  transition: all 0.4s ease;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  filter: drop-shadow(-3px 1px 4px rgba(0, 0, 0, 0.25));
  -webkit-filter: drop-shadow(-3px 1px 4px rgba(0, 0, 0, 0.25));
}
.hydrosite-navigation-button-prev {
  left: -20px;
  border-top-right-radius: 50%;
  border-bottom-right-radius: 50%;
}
.hydrosite-navigation-button-next {
  right: -20px;
  border-top-left-radius: 50%;
  border-bottom-left-radius: 50%;
}
.hydrosite-navigation-button-prev img {
  transform: scale(1.3) translateX(10%);
  -webkit-transform: scale(1.3) translateX(10%);
  -moz-transform: scale(1.3) translateX(10%);
  -ms-transform: scale(1.3) translateX(10%);
  -o-transform: scale(1.3) translateX(10%);
}
.hydrosite-navigation-button-next img {
  transform: scale(1.3) translateX(-10%);
  -webkit-transform: scale(1.3) translateX(-10%);
  -moz-transform: scale(1.3) translateX(-10%);
  -ms-transform: scale(1.3) translateX(-10%);
  -o-transform: scale(1.3) translateX(-10%);
}
.icon-navigate {
  width: 20px;
  height: 17px;
  object-fit: contain;
  transition: all 0.4s ease;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
}
.hydrosite-navigation-button:hover {
  transition: all 0.4s ease;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
}
.hydrosite-navigation-button:hover .icon-navigate {
  transition: all 0.4s ease;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
}
.hydrosite-navigation-button-prev.swiper-button-disabled {
  opacity: 0.5;
  /* pointer-events: none; */
}
.hydrosite-navigation-button-next.swiper-button-disabled {
  opacity: 0.5;
  /* pointer-events: none; */
}
/* truyện đề cử end */

/* truyện hoàn thành start */
.hydrosite-mong-truyen-small-book-img-box {
  border-radius: 12px;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  -ms-border-radius: 12px;
  -o-border-radius: 12px;
  overflow: hidden;
  transition: all 0.4s ease;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
}
.hydrosite-mong-truyen-small-book-img {
  overflow: hidden;
  --bs-aspect-ratio: 150%;
  border-radius: 12px;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  -ms-border-radius: 12px;
  -o-border-radius: 12px;
}
.hydrosite-mong-truyen-small-book-img a,
.hydrosite-mong-truyen-small-book-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.4s ease;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
}

.hydrosite-mong-truyen-small-book-content-large {
  background-color: rgba(255, 255, 255, 0.6);
  position: absolute;
  z-index: 5;
  bottom: 0%;
  left: 0;
  min-width: 500px;
  width: max-content;
  height: max-content;
  max-width: 600px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transform: translateY(0%);
  -webkit-transform: translateY(0%);
  -moz-transform: translateY(0%);
  -ms-transform: translateY(0%);
  -o-transform: translateY(0%);
  backdrop-filter: blur(15px);
  border-radius: 12px;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  -ms-border-radius: 12px;
  -o-border-radius: 12px;
}
.hydrosite-mong-truyen-small-book:hover {
  z-index: 2;
}
.hydrosite-mong-truyen-small-book-wrapper:hover
  .hydrosite-mong-truyen-small-book-content-large {
  opacity: 1;
  visibility: visible;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
}
.hydrosite-mong-truyen-small-book-content-large-img {
  overflow: hidden;
  --bs-aspect-ratio: 150%;
  border-radius: 12px;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  -ms-border-radius: 12px;
  -o-border-radius: 12px;
  max-width: 300px;
  min-height: 100%;
}
.hydrosite-mong-truyen-small-book-content-large-img a,
.hydrosite-mong-truyen-small-book-content-large-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hydrosite-mong-truyen-small-book:hover
  .hydrosite-mong-truyen-small-book-img-box {
  opacity: 0;
  transition: all 0.4s ease;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
}
.book-content-large-info {
  max-width: 100%;
  overflow: hidden;
}
.hydrosite-mong-truyen-small-book-content-large-title a {
  color: var(--primary-color);
  font-size: clamp(1.2rem, 0.5881rem + 0.9552vw, 1.4rem);
  font-weight: 700;
  text-transform: uppercase;
  font-family: var(--title-font);
}
.btn-doc-truyen {
  background-color: var(--primary-color);
  color: var(--white);
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  font-family: var(--title-font);
  padding: 10px 20px;
  transition: all 0.4s ease;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  overflow: hidden;
}
.btn-doc-truyen:hover {
  background-color: var(--hover-color);
  color: var(--white);
  transform: translateY(-5px);
  transition: all 0.4s ease;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  -webkit-transform: translateY(-5px);
  -moz-transform: translateY(-5px);
  -ms-transform: translateY(-5px);
  -o-transform: translateY(-5px);
}
.book-content-large-info-author a {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-color);
  font-family: var(--normal-font);
  transition: color 0.3s ease;
  -webkit-transition: color 0.3s ease;
  -moz-transition: color 0.3s ease;
  -ms-transition: color 0.3s ease;
  -o-transition: color 0.3s ease;
}
.book-content-large-info-author:hover a {
  color: var(--hover-color);
}
.book-content-large-info-description > * span {
  background: transparent !important;
  color: var(--text-color);
}
.hydrosite-mong-truyen-categories-list-item {
  display: -webkit-box;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  max-width: 100%;
  padding: 0;
  margin: 0;
  color: var(--white);
}
.hydrosite-mong-truyen-categories-list-item {
  color: var(--text-color);
}
.hydrosite-mong-truyen-categories-title {
  color: #107fed;
}
.hydrosite-mong-truyen-categories-list-item-link {
  color: var(--text-color);
  /* font-size: clamp(0.8rem, 0.7692rem + 0.1538vw, 0.9rem); */
  font-weight: 500;
  font-family: var(--normal-font);
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  line-height: 1.5;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  text-transform: capitalize;
}
body.index .hydrosite-mong-truyen-categories-list-item-link,
body.index .hydrosite-mong-truyen-categories-list-item,
body.index .hydrosite-mong-truyen-categories-title {
  color: var(--white);
}
.hydrosite-mong-truyen-categories-list-item-link:hover {
  color: var(--hover-color);
}
.hydrosite-mong-truyen-categories-list-item-link.active {
  color: var(--hover-color);
}
.pagination-page .pagination-sm {
  margin-top: 0;
}

.hydrosite-mong-truyen-recently-read-item {
  display: -webkit-box;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  max-width: 100%;
  background: transparent;
  color: #000;
}
.hydrosite-mong-truyen-recently-read-item a {
  color: var(--text-color);
  font-size: clamp(0.9rem, 0.8691rem + 0.154vw, 1rem);
  font-weight: 700;
  text-transform: capitalize;
  font-family: var(--title-font);
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
}
.hydrosite-mong-truyen-recently-read-item a:hover {
  color: var(--hover-color);
}
body.index .hydrosite-mong-truyen-recently-read-item a {
  color: var(--white);
}
/* truyện hoàn thành end */

/* truyện mới cập nhật start */
.hydrosite-truyen-moi-cap-nhat .hydrosite-mong-truyen-book-card {
  border: none;
  box-shadow: none;
}
.hydrosite-truyen-moi-cap-nhat .hydrosite-mong-truyen-book-card:hover {
  transform: translateY(0);
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
}
.hydrosite-truyen-moi-cap-nhat .hydrosite-mong-truyen-book-title {
  font-size: clamp(0.75rem, 0.6731rem + 0.3846vw, 1rem);
}
.hydrosite-truyen-moi-cap-nhat .hydrosite-mong-truyen-book-title:hover {
}

.hydrosite-truyen-moi-cap-nhat .hydrosite-mong-truyen-book-thumbnail-box {
  padding-bottom: 7px;
}
.hydrosite-ds-truyen-section .hydrosite-mong-truyen-book-thumbnail-box {
  padding-bottom: 7px;
}
.hydrosite-ds-truyen-section .hydrosite-mong-truyen-book-info {
  padding-left: 3px;
}

body.index
  .hydrosite-truyen-moi-cap-nhat
  .hydrosite-mong-truyen-book-card:hover {
  box-shadow: none;
  transform: translateY(0);
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
}
/* truyện mới cập nhật end */

/* mộng truyện */

/* footer start */
.hydrosite-mong-truyen-social a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background-color: var(--white);
  transition: all 0.4s ease;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
}
.hydrosite-mong-truyen-social a img {
  width: 70%;
  height: 70%;
  object-fit: contain;
}
.hydrosite-mong-truyen-footer-logo {
  max-width: 200px;
}
.hydrosite-mong-truyen-footer-logo img {
  width: 100%;
  object-fit: contain;
}
.hydrosite-mong-truyen-footer-links a {
  color: var(--white);
  font-family: var(--normal-font);
  font-size: 14px;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
}
.hydrosite-mong-truyen-footer-links a:hover {
  opacity: 0.8;
}
.svg-footer-mobile {
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 0%;
  z-index: 1;
}
/* footer end */

/* trang sản phẩm start */
.hydrosite-ds-truyen-section {
  z-index: 5;
  position: relative;
}
.hydrosite-truyen-title {
  color: #107fed;
  text-transform: uppercase;
  font-size: clamp(1.3rem, 1.2077rem + 0.4615vw, 1.6rem);
  font-family: var(--title-font);
  font-weight: 700;
  border-bottom: 2px solid #fff;
  position: relative;
  z-index: 1;
  line-height: 1.5;
}
.hydrosite-truyen-title::before {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 20%;
  height: 4px;
  background-color: #107fed;
  z-index: -1;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
}

/* Phân trang chuyên nghiệp và sang trọng */
.hydrosite-pagination {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2rem;
  padding: 0 10px;
}

.hydrosite-pagination .pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.hydrosite-pagination .page-item {
  margin: 0;
}
.hydrosite-pagination .page-item.disabled .page-link {
  min-width: 40px;
  min-height: 40px;
}
.hydrosite-pagination .page-link {
  color: var(--primary-color);
  background-color: #ffffff;
  border: 1px solid var(--primary-color);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  font-weight: 500;
  text-decoration: none;
  font-size: 14px;
  padding: 0;
}

/* Dấu ... */
.hydrosite-pagination .page-link-dots {
  border: none;
  background: transparent;
  cursor: default;
  width: 30px;
  min-width: 30px;
  height: auto;
  aspect-ratio: unset;
}

.hydrosite-pagination .page-link:hover {
  color: #ffffff;
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.hydrosite-pagination .page-link-dots:hover {
  color: var(--primary-color);
  background-color: transparent;
}

.hydrosite-pagination .page-item.active .page-link {
  color: #ffffff;
  background-color: #107fed;
  border-color: #107fed;
}

.hydrosite-pagination .page-item.disabled .page-link {
  color: #cccccc;
  background-color: #f8f9fa;
  border-color: #dee2e6;
  cursor: not-allowed;
}

/* Responsive cho mobile */
@media (max-width: 576px) {
  .hydrosite-pagination {
    gap: 6px;
  }

  .hydrosite-pagination .page-link {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    font-size: 13px;
  }

  .hydrosite-pagination .page-link-dots {
    width: 24px;
    min-width: 24px;
  }
}
.san-pham .page-item:first-child .page-link {
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}
.san-pham .page-item:last-child .page-link {
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}
/* trang sản phẩm end */

/* trang sản phẩm show start */
.mdv-san-pham-show {
  position: relative;
  z-index: 5;
}
.justify-content-start {
  font-size: initial;
}
.san-pham-book-item-show::before,
.san-pham-book-item-show::after {
  display: none;
}
.san-pham-book-item-show {
  transform: none;
  -webkit-transform: none;
  -moz-transform: none;
  -ms-transform: none;
  -o-transform: none;
  box-shadow: none;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  overflow: hidden;
}
.mdv-san-pham-show-name {
  color: var(--text-color);
  font-family: var(--title-font);
}
.thong-tin-tinh-trang-text.badge.bg-success {
  color: var(--white);
  background-color: #57a440 !important;
  padding: 5px 12px;
}
.tac-gia-ten {
  /* color: var(--primary-color); */
}
.tac-gia-ten:hover {
  color: var(--hover-color);
}
.btn-mdv-button-2 {
  background: #107fed;
  color: var(--white);
}
.mdv-san-pham-show-thong-tin-truyen-wrapper {
  border: none;
}
.mdv-sps-gioi-thieu-truyen-box {
  border: none;
  background: var(--white);
}
.mvd-san-pham-show-dsc-title {
  text-decoration: none;
}
.btn-xs {
  background: #107fed;
  color: var(--white);
  font-size: 14px;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  text-decoration: none;
  min-width: 120px;
  text-align: center;
  justify-content: center;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px,
    rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
}
.mdv-san-pham-show-gioi-thieu-des span {
  background: transparent !important;
}
.mvd-san-pham-show-dsc-title {
  text-align: center;
}
.mvd-san-pham-show-danh-sach-chuong-wrapper {
  background: var(--white);
  border-radius: 15px;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  -ms-border-radius: 15px;
  -o-border-radius: 15px;
}
.comment-login-prompt {
  background: transparent;
  box-shadow: none;
}
.mong-truyen-binh-luan-wrapper {
  background: var(--white);
  border-radius: 15px;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  -ms-border-radius: 15px;
  -o-border-radius: 15px;
}
.title-img-right path,
.title-img-left path {
  fill: #107FED;
}
.mdv-san-pham-show-comment-list-box {
  border-color: #107FED;
}
/* Thể loại */
.hydrosite-mong-truyen-categories {
  background: var(--bg-color);
  border-radius: 1rem;
  transition: all 0.3s ease;
}

.hydrosite-mong-truyen-categories.collapsed {
  max-height: var(--max-height);
  overflow: hidden;
}

.hydrosite-mong-truyen-categories-toggle {
  width: 100%;
  text-align: center;
  padding: 0.5rem;
  color: var(--primary-color);
  background: transparent;
  border: none;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.3s ease;
}

.hydrosite-mong-truyen-categories-toggle:hover {
  color: var(--primary-color-hover);
}

/* Phân trang danh sách chương */
.mvd-san-pham-show-danh-sach-chuong-pagination {
  margin-top: 2rem;
}

.mvd-san-pham-show-danh-sach-chuong-pagination .pagination {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}

.mvd-san-pham-show-danh-sach-chuong-pagination .page-item {
  margin: 0;
}

.mvd-san-pham-show-danh-sach-chuong-pagination .page-link {
  width: 30px;
  height: 30px;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-color);
  background-color: var(--bg-color);
  border: 1px solid var(--primary-color);
  border-radius: 50% !important;
  -webkit-border-radius: 50% !important;
  -moz-border-radius: 50% !important;
  -ms-border-radius: 50% !important;
  -o-border-radius: 50% !important;
  font-weight: 500;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
}

.mvd-san-pham-show-danh-sach-chuong-pagination .page-item.active .page-link {
  color: #fff;
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.mvd-san-pham-show-danh-sach-chuong-pagination .page-link:hover {
  color: #fff;
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.mvd-san-pham-show-danh-sach-chuong-pagination .page-item.disabled .page-link {
  color: #6c757d;
  background-color: #f8f9fa;
  border-color: #dee2e6;
  cursor: not-allowed;
}

/* Hiệu ứng chuyển trang */
.mvd-san-pham-show-danh-sach-chuong .row {
  transition: opacity 0.3s ease;
}

.mvd-san-pham-show-danh-sach-chuong .row.loading {
  opacity: 0.5;
}

/* Danh sách chương */
.mvd-san-pham-show-danh-sach-chuong-item {
  background: var(--bg-color);
  padding: 1rem;
  border-radius: 8px;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
}

.mvd-san-pham-show-danh-sach-chuong-item:hover a {
  background: var(--primary-color);
}

.mvd-san-pham-show-danh-sach-chuong-item:hover a,
.mvd-san-pham-show-danh-sach-chuong-item:hover div {
  color: #fff;
}

.mvd-san-pham-show-danh-sach-chuong-item a {
  color: var(--text-color);
  font-weight: 600;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
}
.ten-chuong-text {
  color: #595959;
  font-weight: 400;
  transition: color 0.3s ease;
  -webkit-transition: color 0.3s ease;
  -moz-transition: color 0.3s ease;
  -ms-transition: color 0.3s ease;
  -o-transition: color 0.3s ease;
}
.mvd-san-pham-show-danh-sach-chuong-item:hover a .ten-chuong-text {
  color: var(--white);
  transition: color 0.3s ease;
  -webkit-transition: color 0.3s ease;
  -moz-transition: color 0.3s ease;
  -ms-transition: color 0.3s ease;
  -o-transition: color 0.3s ease;
}
.mvd-san-pham-show-danh-sach-chuong-item div {
  color: #6c757d;
  transition: all 0.3s ease;
}

.san-pham-show .hydrosite-mong-truyen-categories-list.collapsed {
  overflow: hidden;
  max-height: var(--max-height);
}
.hydro-san-pham-truyen-cung-tac-gia-item a {
  color: var(--text-color);
  transition: color 0.3s ease;
  -webkit-transition: color 0.3s ease;
  -moz-transition: color 0.3s ease;
  -ms-transition: color 0.3s ease;
  -o-transition: color 0.3s ease;
}
.hydro-san-pham-truyen-cung-tac-gia-item a i {
  color: var(--fourth-color);
}
.hydro-san-pham-truyen-cung-tac-gia-item a:hover {
  color: var(--hover-color);
  transition: color 0.3s ease;
  -webkit-transition: color 0.3s ease;
  -moz-transition: color 0.3s ease;
  -ms-transition: color 0.3s ease;
  -o-transition: color 0.3s ease;
}
.hydro-san-pham-truyen-cung-tac-gia-item {
  border-bottom: 1px solid #efa2a2;
}
.hydro-san-pham-truyen-cung-tac-gia-item-col:last-child
  .hydro-san-pham-truyen-cung-tac-gia-item {
  border-bottom: none;
}
.hydrosite-mong-truyen-categories {
  background: rgba(255, 254, 254, 0.25);
}
.mdv-profile-content-information,
.mdv-profile-content-change-info {
  background: var(--white);
  border-radius: 15px;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  -ms-border-radius: 15px;
  -o-border-radius: 15px;
}

/* trang sản phẩm show end */

/* trang tìm tác giả start */
.hydrosite-mong-truyen-book-thumbnail-box {
  border-radius: 12px;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  -ms-border-radius: 12px;
  -o-border-radius: 12px;
  overflow: hidden;
}
.hydrosite-tac-gia-item-horizontal-description span {
  background: transparent !important;
}
.msv-product-page-content {
  background: transparent;
  box-shadow: none;
}
.msv-product-page-view-mode-button {
  background: transparent;
  border: none;
  color: var(--text-color);
  font-size: 1.2rem;
  cursor: pointer;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  opacity: 0.5;
}
.msv-product-page-view-mode-button.active {
  opacity: 1;
  background: var(--white);
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px,
    rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
}
.hydrosite-mong-truyen-book-card.vertical .hydrosite-mong-truyen-book-title {
  font-size: clamp(0.9rem, 0.8692rem + 0.1538vw, 1rem);
}
.hydrosite-mong-truyen-book-chapter {
  color: #595959;
}
.msv-product-page-view-mode-button-group {
  background: var(--white);
  background: #000;
  /* box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 25px -7px inset,    rgba(0, 0, 0, 0.2) 0px 15px 13px -20px inset; */
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25) inset;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  overflow: hidden;
}

/* trang tìm tác giả end */

/* tìm thể loại start */
.mdv-tim-the-loai-section {
  background: transparent;
}
.msv-product-page-text-special {
  color: #094887;
  font-size: 1.5rem;
  font-weight: 600;
}
.msv-product-page-text-special svg {
  width: 24px;
  height: 24px;
  transform: translateY(-3px);
  -webkit-transform: translateY(-3px);
  -moz-transform: translateY(-3px);
  -ms-transform: translateY(-3px);
  -o-transform: translateY(-3px);
}
.find-category-item .hydrosite-mong-truyen-book-title,
.find-category-item .hydrosite-mong-truyen-book-author,
.find-category-item .hydrosite-mong-truyen-book-view {
  font-size: clamp(0.8rem, 0.7385rem + 0.3077vw, 1rem);
}
.find-category-item .hydrosite-mong-truyen-book-info {
  padding: 4px;
}
/* tìm thể loại end */

/* trang sản phẩm chi tiết start */
.mdv-san-pham-detail {
  background: transparent;
}
.mdv-san-pham-detail-box {
  /* background: var(--white);
  border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px; */
  background: transparent;
  box-shadow: none;
}
.san-pham-detail .breadcrumb {
  justify-content: center;
}
.mdv-doc-truyen-breadcrumb {
  background: transparent;
  font-weight: 400;
  color: var(--text-color);
}
.san-pham-detail .mdv-doc-truyen-breadcrumb .breadcrumb-item.active a {
  color: var(--text-color);
  font-weight: 600;
}
.san-pham-detail .mdv-doc-truyen-breadcrumb .breadcrumb-item a {
  color: var(--text-color);
}
.mdv-san-pham-detail-chuong-title {
  font-size: clamp(1.2rem, 1.1077rem + 0.4615vw, 1.5rem);
}
.mdv-san-pham-detail-tgian i,
.mdv-san-pham-detail-lx i,
.mdv-san-pham-detail-bl i {
  color: var(--text-color);
}
.san-pham-detail .mdv-chuong-button-truoc {
  border-bottom-left-radius: 0;
}
.san-pham-detail .mdv-chuong-button-sau {
  border-bottom-right-radius: 0;
}
.san-pham-detail .mdv-chuong-button {
  background: linear-gradient(90deg, #107fed 0, #094887 100%);
  color: #fff;
  box-shadow: none;
  border: 1px solid #107fed;
}
.san-pham-detail .msv-khung-truyen {
  background: var(--white);
  box-shadow: 0px 0px 6.5px 0px rgba(0, 0, 0, 0.25);
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
}
.hydrosite-ds-chuong-bar-item {
  border-bottom: 1px solid #f27f82;
}
.hydrosite-ds-chuong-bar-item:last-of-type {
  border-bottom: none;
}
.hydrosite-ds-chuong-bar-item-link {
  font-size: 0.9rem;
  color: var(--text-color);
  font-weight: 400;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  display: -webkit-box;
  line-clamp: 1;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hydrosite-ds-chuong-bar-item-link:hover {
  color: var(--hover-color);
}
.hydrosite-ds-chuong-bar {
  background: #fff3ef;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
  -webkit-filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}
.hydrosite-ds-chuong-bar {
  position: sticky;
  top: 65px;
  max-height: 600px;
  overflow-y: auto;
  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
  position: relative; /* Cho phép button toggle hiển thị */
}
.hydrosite-ds-chuong-bar.vh-scrollbar {
  scrollbar-width: none;
}
.san-pham-detail .mdv-san-pham-show-comment,
.mdv-san-pham-detail-truyen-de-cu-container {
  background: var(--white);
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
}
.san-pham-detail .mdv-comic-title-text {
  background-color: var(--white);
}
.san-pham-detail .truyen-de-cu-title {
  color: #107fed;
  text-transform: uppercase;
}
.san-pham-detail .truyen-de-cu-title-link,
.san-pham-detail .truyen-tacgia,
.san-pham-detail .truyen-luotxem i,
.san-pham-detail .truyen-tacgia-text,
.san-pham-detail .truyen-tacgia-text,
.san-pham-detail .truyen-luotxem {
  color: var(--text-color);
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
}
.truyen-de-cu-title-link:hover {
  color: var(--text-color);
}
.btn-doc-chuong {
  border: 1px solid #48982f;
  background: #57a440;
  color: var(--white);
  cursor: pointer;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
}
.btn-doc-chuong:hover {
  background: var(--fourth-color);
  color: var(--white);
}
.msv-khung-truyen-noi-dung {
  padding: 0 20px;
}
.msv-khung-truyen-noi-dung.doc-quyen #noi_dung_truyen::after {
  top: 70px;
}
.mdv-san-pham-detail-khung-tool {
  left: initial;
  right: 0;
  top: 30%;
  position: fixed;
  z-index: 1000;
}
.mdv-san-pham-detail-khung-tool-box-ul {
  background: var(--white);
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  position: relative;
}
.mdv-san-pham-detail-khung-tool-box-ul::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #efa2a2 -25.1%, #ffe8e8 98.91%);
  color: var(--text-color);
}
.btn-che-do-sang-toi {
  position: relative;
}
/* trang sản phẩm chi tiết end */

/* trang thể loại start */
.category-section {
  background: transparent;
}


.btn-show-more {
  background: #107fed;
  color: var(--white);
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  box-shadow: 0px 4px 4px 0px #107fed7d;
  min-width: 120px;
  text-align: center;
  padding: 7px 20px;
}
.btn-show-more:hover {
  background: var(--hover-color);
  color: var(--white);
}
.chapter-list-section,
.mdv-post-story-section-item,
.mdv-profile-user-bottom {
  background: var(--white);
}
/* trang thể loại end */

/* Quản lý thể loại - Thiết kế 2025 */
.qly-the-loai-tb-container {
  background: var(--bg-color);
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

.qly-the-loai-tb-main {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  border-radius: 1rem;
  overflow: hidden;
  margin-bottom: 2rem;
}

.qly-the-loai-tb-header {
  background: linear-gradient(135deg, var(--primary-color), var(--hover-color));
  color: #fff;
}

.qly-the-loai-tb-header th {
  padding: 1rem;
  font-weight: 600;
  text-align: center;
  border: none;
}

.qly-the-loai-tb-row {
  transition: all 0.3s ease;
}

.qly-the-loai-tb-row:nth-child(even) {
  background-color: rgba(var(--primary-color-rgb), 0.05);
}

.qly-the-loai-tb-row:hover {
  background-color: rgba(var(--primary-color-rgb), 0.1);
}

.qly-the-loai-tb-row td {
  padding: 0.75rem 1rem;
  vertical-align: middle;
  border-top: 1px solid rgba(var(--primary-color-rgb), 0.1);
  text-align: center;
}

.qly-the-loai-tb-checkbox-col {
  width: 50px;
}

.qly-the-loai-tb-stt-input {
  width: 80px;
  margin: 0 auto;
  text-align: center;
  border-radius: 0.5rem;
  padding: 0.5rem;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  background: #f8f9fa;
  border-color: transparent;
}

.qly-the-loai-tb-stt-input:focus {
  border-color: var(--primary-color);
}

.qly-the-loai-tb-action-btns {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}

.qly-the-loai-tb-btn-add,
.qly-the-loai-tb-btn-delete,
.qly-the-loai-tb-btn-edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: 500;
  border-radius: 0.5rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.qly-the-loai-tb-btn-add {
  background: linear-gradient(135deg, #4caf50, #2e7d32);
  border: none;
}

.qly-the-loai-tb-btn-add:hover {
  background: linear-gradient(135deg, #2e7d32, #1b5e20);
  transform: translateY(-2px);
}

.qly-the-loai-tb-btn-delete {
  background: linear-gradient(135deg, #f44336, #d32f2f);
  border: none;
}

.qly-the-loai-tb-btn-delete:hover {
  background: linear-gradient(135deg, #d32f2f, #b71c1c);
  transform: translateY(-2px);
}

.qly-the-loai-tb-btn-edit {
  background: linear-gradient(135deg, #2196f3, #1976d2);
  border: none;
}

.qly-the-loai-tb-btn-edit:hover {
  background: linear-gradient(135deg, #1976d2, #0d47a1);
  transform: translateY(-2px);
}

/* Modal thể loại */
.modal-content {
  border-radius: 1rem;
  border: none;
  box-shadow: 0 10px 50px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.modal-header {
  background: linear-gradient(
    135deg,
    var(--primary-color),
    var(--primary-color-hover)
  );
  color: #fff;
  border-bottom: none;
  padding: 1.5rem;
}

.modal-title {
  font-weight: 600;
}

.modal-body {
  padding: 1.5rem;
}

.btn-close {
  color: #fff;
  opacity: 1;
}

.modal .form-label {
  font-weight: 500;
  margin-bottom: 0.5rem;
}

.modal .form-control {
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  border: 1px solid rgba(var(--primary-color-rgb), 0.2);
}

.modal .form-control:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 0.2rem rgba(var(--primary-color-rgb), 0.25);
}

.category-icon img {
  object-fit: contain;
  width: 30px;
  height: 30px;
  transform: translateY(-2px);
  -webkit-transform: translateY(-2px);
  -moz-transform: translateY(-2px);
  -ms-transform: translateY(-2px);
  -o-transform: translateY(-2px);
}

#addCategoryForm .form-control,
#editCategoryModal .form-control {
  background: #f8f9fa;
}
#addCategoryModalLabel,
#editCategoryModalLabel {
  color: var(--text-color) !important;
}

/* trang sản phẩm chi tiết start */
.mdv-san-pham-detail-khung-tool {
  height: max-content;
}
.mdv-san-pham-detail-khung-tool-box {
  transform: translateY(0);
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
}
.mdv-san-pham-detail-khung-tool-box-ul li {
  position: relative;
}
.mdv-san-pham-detail-khung-tool-box-ul li a {
  color: var(--text-color);
}
.msv-chuong-list-container-left {
  max-height: 450px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #e0e0e0;
}
.msv-chuong-number {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-color);
}
.mdv-breadcrumb-chuong-box {
  position: relative;
  z-index: 100;
}
/* trang sản phẩm chi tiết end */

/* dark mode start */
body.dark-mode .hydrosite-mong-truyen-nav {
  background: var(--background-black);
  color: var(--white);
}
body.dark-mode .hydrosite-mong-truyen-nav .hydrosite-mong-truyen-nav-item a {
  color: var(--white);
}
body.dark-mode
  .hydrosite-mong-truyen-nav
  .hydrosite-mong-truyen-nav-item
  a:hover {
  color: var(--fourth-color);
}
body.dark-mode
  .hydrosite-mong-truyen-nav
  .hydrosite-mong-truyen-nav-item
  a.active {
  color: var(--fourth-color);
}
body.dark-mode
  .hydrosite-mong-truyen-nav
  .hydrosite-mong-truyen-nav-item
  a.active:hover {
  color: var(--fourth-color);
}
body.dark-mode .mdv-san-pham-detail-box {
  background: var(--background-dark-light);
}
body.dark-mode.san-pham-detail
  .mdv-doc-truyen-breadcrumb
  .breadcrumb-item.active
  a,
body.dark-mode.san-pham-detail .mdv-san-pham-detail-tgian i,
body.dark-mode.san-pham-detail .mdv-san-pham-detail-lx i,
body.dark-mode.san-pham-detail .mdv-san-pham-detail-bl i {
  color: var(--fourth-color);
}
body.dark-mode.san-pham-detail .breadcrumb-item + .breadcrumb-item::before {
  color: var(--white) !important;
}
body.dark-mode.san-pham-detail .mdv-chuong-button {
  background: var(--background-black);
  color: var(--white);
  border-color: #222;
}
body.dark-mode.san-pham-detail .mdv-chuong-button:hover {
  background: var(--background-dark-light);
  color: var(--white);
}
body.dark-mode.san-pham-detail .mdv-san-pham-show-comment-list-box {
  background: var(--background-dark-light);
}
body.dark-mode.san-pham-detail .msv-khung-truyen {
  background: var(--background-dark);
}
body.dark-mode.san-pham-detail .hydrosite-ds-chuong-bar {
  background: var(--background-black);
}
body.dark-mode.san-pham-detail .hydrosite-ds-chuong-bar-item {
  border-color: #222;
}
body.dark-mode.san-pham-detail .hydrosite-ds-chuong-bar-item-link {
  color: var(--white);
}
body.dark-mode.san-pham-detail .hydrosite-ds-chuong-bar-item-link:hover {
  color: var(--fourth-color);
}
body.dark-mode.san-pham-detail .hydrosite-ds-chuong-bar-item-link.active {
  color: var(--fourth-color);
}
body.dark-mode.san-pham-detail .hydrosite-ds-chuong-bar-item-link.active:hover {
  color: var(--fourth-color);
}
body.dark-mode.san-pham-detail .mdv-san-pham-detail-khung-tool-box-ul::before {
  background: var(--background-black);
}
body.dark-mode.san-pham-detail .mdv-san-pham-detail-khung-tool-box-ul li a {
  color: var(--white);
}
body.dark-mode.san-pham-detail
  .mdv-san-pham-detail-khung-tool-box-ul
  li
  a:hover {
  color: var(--fourth-color);
}
body.dark-mode.san-pham-detail .msv-chuong-list-container-left,
body.dark-mode.san-pham-detail .msv-chuong-list-container {
  background: var(--background-black);
  color: var(--white);
  border-color: #222;
}
body.dark-mode.san-pham-detail .msv-chuong-item {
  border-color: #222;
}
body.dark-mode.san-pham-detail .msv-chuong-link,
body.dark-mode.san-pham-detail .msv-chuong-number,
body.dark-mode.san-pham-detail .msv-chuong-title {
  color: var(--white) !important;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
}
body.dark-mode.san-pham-detail .msv-chuong-item:hover .msv-chuong-link,
body.dark-mode.san-pham-detail .msv-chuong-item:hover .msv-chuong-title,
body.dark-mode.san-pham-detail .msv-chuong-item:hover .msv-chuong-number {
  background: transparent;
  color: var(--fourth-color) !important;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
}
body.dark-mode.san-pham-detail .hydrosite-mong-truyen-header {
  background: var(--background-dark);
  color: var(--white);
}
body.dark-mode.san-pham-detail .hydrosite-avater-login-info-text {
  color: var(--white);
}
body.dark-mode.san-pham-detail .comment-login-prompt p {
  color: var(--white);
}
/* dark mode end */

.font-size-box {
  z-index: 1000;
}
.btn-icon-swiper-next,
.btn-icon-swiper-prev {
  display: none;
}
.mdv-post-story-section {
  padding-top: 0px;
}

/* sửa web */

.hydrosite-mong-truyen-book-card {
}
body.index .hydrosite-mong-truyen-book-card {
  background: #fff;
  box-shadow: none !important;
}
.hydrosite-mong-truyen-book-title {
  color: #000;
}

.hydrosite-mong-truyen-book-author,
.hydrosite-mong-truyen-book-views {
  color: #0d5c72;
}

.hydrosite-mong-truyen-book-title:hover,
.hydrosite-mong-truyen-book-author:hover,
.hydrosite-mong-truyen-book-views:hover,
.hydrosite-truyen-moi-cap-nhat .hydrosite-mong-truyen-book-title:hover {
}
.hydrosite-mong-truyen-book-card,
.hydrosite-mong-truyen-book-thumbnail-box {
  overflow: visible;
}
.hydrosite-mong-truyen-book-card:hover
  .hydrosite-mong-truyen-small-book-content-large {
  opacity: 1;
  visibility: visible;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  z-index: 100;
}
.hydrosite-mong-truyen-book-card,
.bxh-mong-truyen-item {
  position: relative;
  z-index: 1;
}
.hydrosite-mong-truyen-book-card:hover,
.bxh-mong-truyen-item:hover {
  z-index: 100;
}

.hydrosite-mong-truyen-section-xemthem {
  padding: 6px 15px;
  display: block;
  border: 1px solid #0080ff;
  border-radius: 4px;
  color: #0080ff;
}

.hydrosite-mong-truyen-section-xemthem img {
  margin-left: 5px;
}

.san-pham .hydrosite-mong-truyen-book-title,
.san-pham .hydrosite-mong-truyen-book-author,
.san-pham .hydrosite-mong-truyen-book-views {
  color: var(--text-color);
}
.san-pham .hydrosite-mong-truyen-book-title:hover,
.san-pham .hydrosite-mong-truyen-book-author:hover,
.san-pham .hydrosite-mong-truyen-book-views:hover,
.san-pham
  .hydrosite-truyen-moi-cap-nhat
  .hydrosite-mong-truyen-book-title:hover {
  color: rgba(0, 0, 0, 0.7);
}
.hydrosite-mong-truyen-categories-title {
  font-size: clamp(0.8rem, 0.7385rem + 0.3077vw, 1rem);
  padding: 8px 5px;
}
.hydrosite-mong-truyen-recently-read-item a,
.hydrosite-mong-truyen-categories-list-item-link {
  font-size: clamp(0.8rem, 0.7846rem + 0.0769vw, 0.85rem);
}

/* Responsive Design */
.hydrosite-mong-truyen-recently-read-item a,
.hydrosite-mong-truyen-recently-read-item a:hover {
  color: var(--text-color);
}

/* ========================================== */
/* TOGGLE BUTTON STYLES FOR READING INTERFACE */
/* ========================================== */

/* Nút toggle cho thanh công cụ bên phải */
.mdv-tool-toggle-btn {
  position: absolute;
  top: 10px;
  right: 40px; /* Vị trí khi thanh chức năng hiển thị */
  width: 30px;
  height: 50px;
  background: linear-gradient(135deg, var(--primary-color), var(--dark-pink));
  border: none;
  border-radius: 8px 0 0 8px; /* Border radius phù hợp với vị trí bên trái thanh */
  color: var(--white);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 1002;
  box-shadow: none;
  opacity: 1;
  visibility: visible;
}

.mdv-tool-toggle-btn:hover {
  background: linear-gradient(135deg, var(--dark-pink), var(--primary-color));
  transform: translateX(-3px); /* Transform sang trái */
  box-shadow: -4px 4px 12px rgba(0, 0, 0, 0.3); /* Shadow hướng trái */
}

.mdv-tool-toggle-btn i {
  transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transition: transform 0.3s ease;
  -webkit-transition: transform 0.3s ease;
  -moz-transition: transform 0.3s ease;
  -ms-transition: transform 0.3s ease;
  -o-transition: transform 0.3s ease;
}

.mdv-san-pham-detail-khung-tool.collapsed .mdv-tool-toggle-btn i {
  transform: rotate(-180deg);
  -webkit-transform: rotate(-180deg);
  -moz-transform: rotate(-180deg);
  -ms-transform: rotate(-180deg);
  -o-transform: rotate(-180deg);
}

/* Nút toggle cho danh sách chương */
.hydrosite-chapter-toggle-btn {
  position: absolute;
  top: 10px;
  left: -35px; /* Hiển thị bên phải của danh sách chương */
  width: 30px;
  height: 50px;
  background: linear-gradient(135deg, var(--primary-color), var(--dark-pink));
  border: none;
  border-radius: 0 8px 8px 0; /* Border radius phù hợp với vị trí bên phải */
  color: var(--white);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 1001;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
  opacity: 1;
  visibility: visible;
}

.hydrosite-chapter-toggle-btn:hover {
  background: linear-gradient(135deg, var(--dark-pink), var(--primary-color));
  transform: translateX(3px); /* Transform sang phải khi expanded */
  box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.3); /* Shadow hướng phải khi expanded */
}

.hydrosite-ds-chuong-bar.collapsed .hydrosite-chapter-toggle-btn:hover {
  transform: translateX(
    -3px
  ) !important; /* Transform sang trái khi collapsed */
  box-shadow: -4px 4px 12px rgba(0, 0, 0, 0.3) !important; /* Shadow hướng trái khi collapsed */
}

.hydrosite-chapter-toggle-btn i {
  transition: transform 0.3s ease;
}

.hydrosite-ds-chuong-bar.collapsed .hydrosite-chapter-toggle-btn i {
  transform: rotate(180deg);
}

/* Trạng thái thu gọn cho thanh công cụ */
.mdv-san-pham-detail-khung-tool.collapsed {
  width: 50px !important;
  right: 0 !important; /* Di chuyển về right: 0 khi collapsed */
  overflow: visible; /* Thay đổi để button luôn hiện */
  transition: all 0.4s ease;
}

.mdv-san-pham-detail-khung-tool.collapsed .mdv-tool-toggle-btn {
  right: 0 !important; /* Di chuyển về right: 0 khi collapsed */
  border-radius: 0 8px 8px 0 !important; /* Đổi border radius khi collapsed */
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2) !important; /* Shadow hướng phải khi collapsed */
  opacity: 1 !important;
  visibility: visible !important;
}

.mdv-san-pham-detail-khung-tool.collapsed .mdv-san-pham-detail-khung-tool-box {
  opacity: 0;
  visibility: hidden;
  transform: translateX(100%);
  transition: all 0.3s ease;
}

/* Đảm bảo nút toggle luôn hiển thị và hover effect khi collapsed */
.mdv-san-pham-detail-khung-tool.collapsed .mdv-tool-toggle-btn {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

.mdv-san-pham-detail-khung-tool.collapsed .mdv-tool-toggle-btn {
  transform: translateX(3px) !important;
  box-shadow: none !important;
  -webkit-transform: translateX(3px) !important;
  -moz-transform: translateX(3px) !important;
  -ms-transform: translateX(3px) !important;
  -o-transform: translateX(3px) !important;
  border-radius: 0 !important;
  border-top-left-radius: 10px !important;
  border-bottom-left-radius: 10px !important;
}

/* Trạng thái thu gọn cho danh sách chương */
.hydrosite-ds-chuong-bar {
  transition: all 0.4s ease;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
}
.hydrosite-ds-chuong-bar.collapsed {
  width: 0px !important;
  margin-left: auto !important;
  overflow: visible;
  transition: all 0.4s ease;
  position: relative;
  padding: 0 !important;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
}

.hydrosite-ds-chuong-bar.collapsed .hydrosite-chapter-toggle-btn {
  right: 5px !important; /* Di chuyển vào trong khi collapsed */
  border-radius: 8px 0 0 8px !important; /* Đổi border radius khi collapsed */
  box-shadow: -2px 2px 8px rgba(0, 0, 0, 0.2) !important; /* Shadow hướng trái khi collapsed */
  opacity: 1 !important;
  visibility: visible !important;
}

.hydrosite-ds-chuong-bar.collapsed .hydrosite-ds-chuong-bar-item {
  opacity: 0;
  visibility: hidden;
  transform: translateX(-100%);
  transition: all 0.3s ease;
}

/* Đảm bảo nút toggle luôn hiển thị */
.hydrosite-ds-chuong-bar.collapsed .hydrosite-chapter-toggle-btn {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* Tăng font-size cho nội dung truyện */
#noi_dung_truyen {
  font-size: 1.125rem; /* Tăng từ 1rem (~16px) lên 1.125rem (~18px) */
  line-height: 1.4;
  letter-spacing: 0.3px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  #noi_dung_truyen {
    font-size: 1rem;
    line-height: 1.6;
  }

  .mdv-tool-toggle-btn,
  .hydrosite-chapter-toggle-btn {
    width: 25px;
    height: 40px;
    font-size: 12px;
  }

  .mdv-tool-toggle-btn {
    right: 40px; /* Điều chỉnh cho mobile */
  }

  .mdv-san-pham-detail-khung-tool.collapsed .mdv-tool-toggle-btn {
    right: 0 !important; /* Vẫn về 0 khi collapsed trên mobile */
  }

  .hydrosite-chapter-toggle-btn {
    right: -30px; /* Giữ ở bên phải cho mobile */
  }

  .hydrosite-ds-chuong-bar.collapsed .hydrosite-chapter-toggle-btn {
    right: 5px !important; /* Vẫn về trong khi collapsed trên mobile */
  }
}

/* Dark mode support cho nút toggle */
body.dark-mode .mdv-tool-toggle-btn,
body.dark-mode .hydrosite-chapter-toggle-btn {
  background: linear-gradient(
    135deg,
    var(--background-dark),
    var(--background-dark-light)
  );
  box-shadow: -2px 2px 8px rgba(255, 255, 255, 0.1);
}

body.dark-mode .mdv-tool-toggle-btn:hover,
body.dark-mode .hydrosite-chapter-toggle-btn:hover {
  background: linear-gradient(
    135deg,
    var(--background-dark-light),
    var(--background-dark)
  );
  box-shadow: -4px 4px 12px rgba(255, 255, 255, 0.2);
}

/* Animation cho scroll indicator */
.scroll-progress-indicator {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--primary-color), var(--dark-pink));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.1s ease;
  z-index: 9999;
}
.hydrosite-ds-chuong-bar {
  overflow: visible;
}
#noi_dung_truyen {
  position: relative;
}
.msv-khung-truyen-noi-dung.doc-quyen #noi_dung_truyen::after {
  pointer-events: none;
}
.hydro-danh-sach-chuong-box {
  max-height: 500px;
  overflow-y: auto;
}
.san-pham-detail #toTop {
  display: none !important;
}
/* tăng font size */
.san-pham-detail .mdv-doc-truyen-breadcrumb .breadcrumb-item a {
  font-size: clamp(1rem, 0.9692rem + 0.1538vw, 1.1rem);
}
.mdv-san-pham-detail-tgian-lx-bl-box {
  font-size: clamp(1rem, 0.9692rem + 0.1538vw, 1.1rem);
}
.mdv-san-pham-detail-chuong-title-text {
  font-size: clamp(1.2rem, 1.0154rem + 0.9231vw, 1.8rem);
}
.san-pham-detail .mdv-chuong-button {
  font-size: clamp(1rem, 0.9692rem + 0.1538vw, 1.1rem);
}
.hydrosite-mong-truyen-menu-item-link {
  font-size: 1.2rem;
}
.msv-chuong-number {
  font-size: 0.9rem;
}
.mdv-san-pham-show-name {
  font-size: clamp(1.2rem, 1.0769rem + 0.6154vw, 1.6rem);
}
.mdv-san-pham-comic-info ul,
.san-pham-the-loai-item,
.san-pham-show-report,
.san-pham-show-link,
.btn-mdv-button-2,
.collapsed-gioi-thieu,
.btn-xs,
.mvd-san-pham-show-danh-sach-chuong-item a,
.comment-login-prompt h5,
.comment-login-prompt p,
.mdv-sps-luot-xem,
.mdv-sps-tac-gia,
.mdv-sps-tinh-trang {
  font-size: clamp(1rem, 0.9385rem + 0.3077vw, 1.2rem);
}
.mvd-san-pham-show-dsc-title {
  font-size: clamp(1.2rem, 1.0769rem + 0.6154vw, 1.6rem);
}
.mdv-header-find-form-image {
  width: 100%;
  max-width: 100%;
}
.mdv-header-find-form-pc-result {
  max-height: 400px;
  overflow-y: auto;
}
.mdv-header-find-form-ul {
  max-height: 350px;
  overflow-y: auto;
}
.mdv-header-find-form-name {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: break-word;
}
.hydrosite-mong-truyen-categories-list-item-link-icon {
  width: 210px;
  height: 210px;
  margin-bottom: 1rem;
}
.hydrosite-mong-truyen-categories-list-item-link-text {
  font-size: clamp(1rem, 0.9385rem + 0.3077vw, 1.2rem);
  line-height: 1.2;
}
.hydrosite-mong-truyen-categories-list-item-link-count {
  font-size: clamp(0.9rem, 0.8692rem + 0.1538vw, 1rem);
}
.chapter-list-section,
.mdv-post-story-section-item,
.mdv-profile-user-bottom {
  margin-top: 20px;
}

body.tim-the-loai .hydrosite-mong-truyen-small-book-title,
body.tim-the-loai .hydrosite-mong-truyen-small-book-author,
body.tim-the-loai .hydrosite-mong-truyen-small-book-views,
body.tim-tac-gia .hydrosite-mong-truyen-book-title,
body.tim-tac-gia .hydrosite-mong-truyen-book-author,
body.tim-tac-gia .hydrosite-mong-truyen-book-views {
  color: var(--background-black) !important;
}

/* Hiệu ứng tràn viền bên phải cho swiper - bỏ container */
.hydrosite-mong-truyen-de-cu-swiper-box,
.hydrosite-mong-truyen-bang-xep-hang-swiper-box {
  padding-right: 0; /* Không có padding bên phải để tràn viền */
  position: relative;
  z-index: 10;
}

/* Điều chỉnh navigation buttons */
.hydrosite-mong-truyen-section-truyen-de-cu .hydrosite-navigation-button-next,
.hydrosite-mong-truyen-de-cu-content .hydrosite-navigation-button-next {
  right: 0px !important; /* Cách mép phải cố định */
  z-index: 10 !important;
}

/* ============= SEARCH PAGE STYLES ============= */
/* Prefix: .search to avoid CSS conflicts */

.search-page-container {
  padding: 2rem 0;
}

/* Search page sử dụng nền giống trang chủ */
body.search-page {
  background: var(--background-gradient);
}

body.search-page .anh-nen-body,
body.search-page .anh-nen-body-image {
  opacity: 1;
}

/* Old search styles - now overridden by enhanced styles above */

/* Welcome message styles */
.search-welcome,
.search-no-results {
  text-align: center;
  padding: 4rem 2rem;
  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
  border-radius: 15px;
  border: 2px dashed #dee2e6;
}

.search-welcome-icon,
.search-no-results-icon {
  font-size: 4rem;
  color: var(--primary-color);
  margin-bottom: 1.5rem;
  display: block;
}

.search-welcome h3,
.search-no-results h3 {
  color: var(--text-color);
  font-size: 1.8rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.search-welcome p,
.search-no-results p {
  color: #6c757d;
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
}

.search-suggestions {
  background: white;
  border-radius: 10px;
  padding: 1.5rem;
  margin-top: 2rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.search-suggestions p {
  font-weight: 600;
  color: var(--primary-color);
  margin-bottom: 1rem;
}

.search-suggestions ul {
  list-style: none;
  padding-left: 1rem;
  margin-bottom: 0;
}

.search-suggestions li {
  color: #6c757d;
  margin-bottom: 0.5rem;
  position: relative;
}

.search-suggestions li::before {
  content: "▸";
  color: var(--primary-color);
  font-weight: bold;
  position: absolute;
  left: -1rem;
}

/* Search sidebar styles */
.search-sidebar {
  position: sticky;
  top: 2rem;
}

.search-sidebar-section {
  /* background: rgba(255, 255, 255, 0.25); */
  background: linear-gradient(90deg, #107fed 0, #094887 100%);
  border-radius: 15px;
  padding: 1.5rem;
  margin-bottom: 2rem;
  border: 1px solid #107fed;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(10px);
}

.search-sidebar-title {
  color: var(--white);
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  text-transform: uppercase;
  font-family: var(--title-font);
  border-bottom: 1px solid #ffbb94;
  padding-bottom: 0.5rem;
  position: relative;
}

.search-sidebar-title::before {
  position: absolute;
  content: "";
  width: 20%;
  height: 4px;
  background-color: #ffbb94;
  bottom: -2px;
  left: 0;
  z-index: 1;
}

.search-sidebar-title i {
  margin-right: 0.5rem;
  color: #ffd700;
}

.search-sidebar-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.search-sidebar-item {
  transition: all 0.3s ease;
}

.search-sidebar-link {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem;
  border-radius: 10px;
  transition: all 0.3s ease;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.search-sidebar-link:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
}

.search-sidebar-thumb {
  width: 50px;
  height: 75px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
}

.search-sidebar-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.search-sidebar-info {
  flex: 1;
  min-width: 0;
}

.search-sidebar-name {
  color: var(--white);
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.3;
}

.search-sidebar-views {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.8rem;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.search-sidebar-views i {
  color: #ffd700;
}
/* Search page header adjustments for gradient background */
.search-page-header {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
}

/* Responsive design for search page */
@media (max-width: 768px) {
  .search-sidebar {
    position: static;
    margin-top: 2rem;
  }

  .search-sidebar-section {
    padding: 1rem;
  }

  .search-sidebar-thumb {
    width: 40px;
    height: 60px;
  }

  .search-sidebar-name {
    font-size: 0.85rem;
  }

  .search-page-header {
    padding: 1.5rem 1rem;
    margin-bottom: 2rem;
  }

}

/* Search results grid optimization - Bootstrap 5 compatible */
.search-results-grid {
  /* Bootstrap 5 sẽ tự động handle spacing với g-3 class */
}

/* Search result item enhancements */
.search-result-item {
  height: 100%;
  transition: all 0.3s ease;
}

.search-result-item:hover {
  transform: translateY(-5px);
}

/* Responsive adjustments for search items */
@media (max-width: 576px) {
  .search-results-grid {
    /* Sử dụng g-2 cho mobile để compact hơn */
  }

  .search-result-item {
    /* Bootstrap 5 tự động handle margin */
  }
}



@media (min-width: 768px) {
  .search-results-container {
    padding: 2.5rem;
  }
}

/* Search page header improvements */
.search-page-header {
  text-align: center;
  margin-bottom: 3rem;
  padding: 2.5rem 2rem;
  background: #107fed;
  color: white;
  border-radius: 20px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
  position: relative;
  overflow: hidden;
}

.search-page-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="white" opacity="0.1"/><circle cx="75" cy="75" r="1" fill="white" opacity="0.1"/><circle cx="50" cy="10" r="0.5" fill="white" opacity="0.05"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
  pointer-events: none;
}

.search-page-title {
  font-size: clamp(2rem, 3vw, 2.8rem);
  font-weight: 800;
  margin-bottom: 0.75rem;
  text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.3);
  position: relative;
  z-index: 1;
}

.search-keyword {
  color: #fff;
  font-weight: 900;
  background-clip: text;
}

.search-results-count {
  font-size: 1.2rem;
  margin-bottom: 0;
  opacity: 0.95;
  font-weight: 500;
  position: relative;
  z-index: 1;
}

/* Enhanced comic item cards for search */
.search-result-item .hydrosite-mong-truyen-small-book {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.search-result-item .hydrosite-mong-truyen-small-book:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  background: rgba(255, 255, 255, 1);
}

.search-result-item .hydrosite-mong-truyen-small-book-img-box {
  border-radius: 15px 15px 0 0;
  overflow: hidden;
}

.search-result-item .hydrosite-mong-truyen-small-book-title {
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.4;
  margin-top: 0.75rem;
  color: var(--text-color);
  transition: color 0.3s ease;
}

.search-result-item .hydrosite-mong-truyen-small-book-title:hover {
  color: var(--primary-color);
}

.search-result-item .hydrosite-mong-truyen-small-book-author-box {
  padding: 0 0.5rem;
  margin-top: 0.5rem;
}

.search-result-item .hydrosite-mong-truyen-small-book-author,
.search-result-item .hydrosite-mong-truyen-small-book-views {
  font-size: 0.85rem;
  color: #6c757d;
}

.search-result-item .hydrosite-mong-truyen-small-book-author i,
.search-result-item .hydrosite-mong-truyen-small-book-views i {
  color: var(--primary-color);
  margin-right: 0.25rem;
}

/* Chỉ giãn dòng khi có class expand-lines */
/* #noi_dung_truyen.expand-lines {
  line-height: 1.8;    
} */

.hydrosite-ds-chuong-bar {
  display: none !important;
}

.xemtatca {
  background-color: #107fed;
  color: #fff;
}

.xemtatca:hover {
  color: #fff;
}

.xemtatca img {
  margin-left: 8px;
}

.categoryft__item {
  background: url(../images/bgtitle.png) no-repeat;
  background-size: 100% 100%;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  padding: 0 20px;
}