@charset "UTF-8";
/*!
Theme Name: TruyenHD
Theme URI: http://truyenhd.com/
Author: HDKhanhNhat
Author URI: http://truyenhd.com/
Description: A custom theme for TruyenHD website
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: truyenhd
*/
/* Google Fonts Import */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&family=Nunito:wght@400;500;600;700&family=Oswald:wght@400;500;600;700&family=Roboto+Condensed:wght@400;500;700&family=Roboto:wght@400;500;700&display=swap");
/* Font Classes */
.font-roboto-condensed {
  font-family: "Roboto Condensed", sans-serif; }

.font-oswald {
  font-family: "Oswald", sans-serif; }

/* Heading Typography */
h1, h2, h3, h4, h5, h6 {
  font-family: "Oswald", sans-serif;
  font-weight: 700;
  line-height: 1.2; }

h1 {
  font-size: 2.5rem; }

h2 {
  font-size: 2rem; }

h3 {
  font-size: 1.75rem; }

h4 {
  font-size: 1.5rem; }

h5 {
  font-size: 1.25rem; }

h6 {
  font-size: 1rem; }

/* Body Typography */
body {
  font-family: "Roboto Condensed", sans-serif;
  font-size: 16px;
  line-height: 1.6; }

/* Font Weight Utilities */
.fw-normal {
  font-weight: 400; }

.fw-medium {
  font-weight: 500; }

.fw-semibold {
  font-weight: 600; }

.fw-bold {
  font-weight: 700; }

/* Reset and base styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; }

html {
  font-size: 16px; }

body {
  font-family: "Roboto Condensed", sans-serif;
  color: #333;
  line-height: 24px;
  background-color: #fff; }

h1, h2, h3, h4, h5, h6 {
  font-family: "Oswald", sans-serif;
  font-weight: 700;
  line-height: 1.2; }

a {
  color: #187A97;
  text-decoration: none;
  transition: color 0.3s ease; }
  a:hover {
    color: #11566b; }

img {
  max-width: 100%;
  height: auto; }

ul, ol {
  list-style: none; }

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit; }

/* Header styles */
.site-header {
  background-color: #AD1E4B;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); }

.header-container {
  max-width: 1232px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  gap: 35px; }

/* Logo */
.site-branding {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  flex: 0 0 auto; }

.custom-logo {
  display: block;
  height: 23px; }

.site-title {
  font-size: 24px;
  font-weight: bold;
  margin: 0; }
  .site-title a {
    color: #333; }
    .site-title a:hover {
      color: #187A97; }

.site-description {
  font-size: 14px;
  margin: 4px 0 0;
  color: #B9B9B9; }

/* Main Navigation */
.main-navigation {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  flex: 1 1 auto; }

/* Dropdown Menu */
.nav-item {
  position: relative; }

.nav-link {
  cursor: pointer;
  display: block;
  padding: 15px 8px;
  color: #fff;
  font-weight: 400;
  text-decoration: none;
  font-size: 14px;
  line-height: 20px;
  font-family: "Roboto Condensed", sans-serif;
  transition: color 0.3s ease;
  text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.25); }
  .nav-link i {
    margin-left: 4px; }
  .nav-link:hover {
    color: #fff;
    opacity: 0.8; }

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  display: none;
  min-width: 200px;
  background-color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  padding: 8px 0;
  z-index: 100; }
  .dropdown-menu a {
    display: block;
    padding: 8px 16px;
    color: #333;
    text-decoration: none;
    transition: background-color 0.3s ease; }
    .dropdown-menu a i {
      margin-right: 8px;
      width: 16px;
      text-align: center; }
    .dropdown-menu a:hover {
      background-color: #f8f8f8;
      color: #187A97; }

.nav-item:hover .dropdown-menu {
  display: block; }

/* Category Dropdown */
.category-dropdown {
  width: 480px;
  padding: 8px 0;
  display: none;
  flex-wrap: wrap; }
  .category-dropdown .the-loai-menu {
    width: 100%;
    display: flex;
    flex-wrap: wrap; }
    .category-dropdown .the-loai-menu .the-loai-item {
      flex: 0 0 calc(33.333% - 8px);
      padding: 4px 24px;
      color: #333;
      text-decoration: none;
      font-size: 12px;
      line-height: 18px;
      border-radius: 4px;
      transition: all 0.2s ease;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis; }
      .category-dropdown .the-loai-menu .the-loai-item:hover {
        background-color: #f8f8f8;
        color: #187A97; }
      .category-dropdown .the-loai-menu .the-loai-item i {
        width: auto;
        margin: 0; }

/* Header Actions */
.header-actions {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: nowrap;
  flex: 0 0 auto; }

/* Search Form */
.search-form {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  margin-right: 15px;
  gap: 5px; }

.search-field {
  border: 1px solid #CCCCCC;
  border-radius: 4px;
  padding: 0 16px;
  font-size: 14px;
  height: 34px;
  width: 180px;
  outline: none;
  transition: border-color 0.3s ease;
  outline: none !important; }

.search-submit {
  background: none;
  border: none;
  color: #B9B9B9;
  cursor: pointer;
  padding: 8px 16px;
  font-size: 14px;
  height: 34px;
  line-height: 20px;
  transition: color 0.3s ease;
  background: linear-gradient(113.11deg, #FF1F4E 30%, #FECDD3 100%);
  border-radius: 4px;
  width: fit-content;
  white-space: nowrap;
  color: #fff; }

/* User Dropdown */
.user-dropdown .nav-link {
  width: 34px;
  height: 50px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  padding: 0; }
  .user-dropdown .nav-link img {
    width: 14px; }

.user-dropdown .dropdown-menu {
  right: 0;
  left: auto; }

/* Responsive Styles */
@media (min-width: 768px) and (max-width: 991px) {
  .header-container {
    flex-wrap: wrap; }
  .main-navigation {
    order: 3;
    width: 100%;
    margin-top: 16px;
    justify-content: flex-start; }
  .nav-item {
    margin: 0 8px 0 0; }
  .search-field {
    width: 150px; } }

@media (max-width: 767px) {
  .header-container {
    flex-direction: column;
    align-items: flex-start; }
  .site-branding {
    margin-bottom: 16px; }
  .header-actions {
    width: 100%;
    justify-content: space-between;
    margin-top: 16px; }
  .search-form {
    flex: 1;
    margin-right: 8px; }
  .search-field {
    width: 100%; }
  .main-navigation {
    justify-content: space-between; }
  .dropdown-menu {
    position: static;
    box-shadow: none;
    border: 1px solid #CCCCCC;
    margin-top: 4px; } }

/* Content styles */
.site-content {
  max-width: 1232px;
  padding: 0 16px;
  margin: 0 auto;
  overflow: hidden; }

.site-grid {
  display: flex;
  gap: 30px;
  padding: 25px 0; }

.site-box {
  background: rgba(255, 255, 255, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 8px 0px 20px rgba(31, 38, 135, 0.37);
  backdrop-filter: blur(2px);
  border-radius: 10px;
  padding: 24px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: 15px; }
  .site-box .star-bl,
  .site-box .rating {
    width: 264px; }
  .site-box .new-chap {
    flex: 1; }

.content-area {
  width: 100%; }

/* Posts and pages */
.post,
.page {
  margin-bottom: 32px; }

.entry-header {
  margin-bottom: 24px; }
  .entry-header .entry-title {
    font-size: 28px;
    font-weight: bold;
    margin: 0 0 8px 0;
    font-family: "Oswald", sans-serif;
    line-height: 1.2; }
    .entry-header .entry-title a {
      color: #333; }
      .entry-header .entry-title a:hover {
        color: #187A97; }

.entry-meta {
  font-size: 14px;
  color: #B9B9B9;
  margin-bottom: 16px; }
  .entry-meta .posted-on,
  .entry-meta .byline {
    margin-right: 16px; }
  .entry-meta a {
    color: #B9B9B9; }
    .entry-meta a:hover {
      color: #187A97; }

.post-thumbnail {
  margin-bottom: 24px; }
  .post-thumbnail img {
    width: 100%;
    height: auto;
    border-radius: 4px; }

.entry-content {
  margin-bottom: 24px; }
  .entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4, .entry-content h5, .entry-content h6 {
    margin-top: 32px;
    margin-bottom: 16px; }
  .entry-content p {
    margin-bottom: 24px; }
  .entry-content ul, .entry-content ol {
    margin-left: 24px;
    margin-bottom: 24px; }
  .entry-content blockquote {
    border-left: 4px solid #187A97;
    padding-left: 24px;
    margin-left: 0;
    margin-right: 0;
    font-style: italic;
    color: #B9B9B9; }
  .entry-content img {
    max-width: 100%;
    height: auto;
    margin-bottom: 16px; }
  .entry-content .wp-caption {
    max-width: 100%;
    margin-bottom: 24px; }
    .entry-content .wp-caption img {
      margin-bottom: 4px; }
  .entry-content .wp-caption-text {
    font-size: 14px;
    color: #B9B9B9;
    text-align: center; }

.entry-footer {
  font-size: 14px;
  color: #B9B9B9;
  padding-top: 16px;
  border-top: 1px solid #CCCCCC; }
  .entry-footer .cat-links,
  .entry-footer .tags-links,
  .entry-footer .comments-link,
  .entry-footer .edit-link {
    display: block;
    margin-bottom: 4px; }

/* Comments */
.comments-area {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid #CCCCCC; }

.comment-list {
  list-style: none;
  margin: 0;
  padding: 0; }
  .comment-list li {
    margin-bottom: 24px; }
  .comment-list .children {
    list-style: none;
    margin-left: 32px;
    padding-left: 0; }

.comment-body {
  padding: 16px;
  border: 1px solid #CCCCCC;
  border-radius: 4px;
  background-color: #f8f8f8; }

.comment-meta {
  margin-bottom: 16px; }
  .comment-meta .comment-author {
    font-weight: bold; }
    .comment-meta .comment-author img {
      border-radius: 50%;
      margin-right: 8px; }
  .comment-meta .comment-metadata {
    font-size: 12px;
    color: #B9B9B9;
    margin-top: 4px; }
    .comment-meta .comment-metadata a {
      color: #B9B9B9; }
      .comment-meta .comment-metadata a:hover {
        color: #187A97; }

.comment-content p:last-child {
  margin-bottom: 0; }

.comment-reply-link {
  display: inline-block;
  background-color: #187A97;
  color: #fff;
  padding: 4px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.3s ease;
  font-size: 14px; }
  .comment-reply-link:hover {
    background-color: #11566b; }

.comment-respond {
  margin-top: 32px; }

.comment-form label {
  display: block;
  margin-bottom: 4px;
  font-weight: bold; }

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid #CCCCCC;
  border-radius: 4px;
  margin-bottom: 16px; }
  .comment-form input[type="text"]:focus,
  .comment-form input[type="email"]:focus,
  .comment-form input[type="url"]:focus,
  .comment-form textarea:focus {
    border-color: #187A97;
    outline: none; }

.comment-form textarea {
  height: 150px; }

.comment-form .form-submit {
  margin-top: 16px; }
  .comment-form .form-submit input[type="submit"] {
    display: inline-block;
    background-color: #187A97;
    color: #fff;
    padding: 8px 24px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.3s ease; }
    .comment-form .form-submit input[type="submit"]:hover {
      background-color: #11566b; }

/* Pagination */
.pagination,
.posts-navigation,
.post-navigation {
  margin: 32px 0; }
  .pagination .nav-links,
  .posts-navigation .nav-links,
  .post-navigation .nav-links {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap; }
    .pagination .nav-links .page-numbers,
    .pagination .nav-links .nav-previous a,
    .pagination .nav-links .nav-next a,
    .posts-navigation .nav-links .page-numbers,
    .posts-navigation .nav-links .nav-previous a,
    .posts-navigation .nav-links .nav-next a,
    .post-navigation .nav-links .page-numbers,
    .post-navigation .nav-links .nav-previous a,
    .post-navigation .nav-links .nav-next a {
      display: inline-block;
      padding: 8px 16px;
      border: 1px solid #CCCCCC;
      border-radius: 4px;
      color: #333;
      text-decoration: none;
      transition: all 0.3s ease; }
      .pagination .nav-links .page-numbers:hover,
      .pagination .nav-links .nav-previous a:hover,
      .pagination .nav-links .nav-next a:hover,
      .posts-navigation .nav-links .page-numbers:hover,
      .posts-navigation .nav-links .nav-previous a:hover,
      .posts-navigation .nav-links .nav-next a:hover,
      .post-navigation .nav-links .page-numbers:hover,
      .post-navigation .nav-links .nav-previous a:hover,
      .post-navigation .nav-links .nav-next a:hover {
        background-color: #f8f8f8;
        color: #187A97; }
    .pagination .nav-links .current,
    .posts-navigation .nav-links .current,
    .post-navigation .nav-links .current {
      background-color: #187A97;
      color: #fff;
      border-color: #187A97; }

/* Archives and search results */
.page-header {
  margin-bottom: 32px;
  padding-bottom: 16px;
  border-bottom: 1px solid #CCCCCC; }
  .page-header .page-title {
    margin-bottom: 8px; }
  .page-header .taxonomy-description {
    color: #B9B9B9; }

/* Footer styles */
.site-footer {
  color: #fff;
  overflow: hidden; }

.footer-container {
  max-width: 1232px;
  margin: 0 auto;
  padding: 0 24px; }

.footer__wrap {
  position: relative;
  z-index: 1;
  padding: 35px 0; }
  .footer__wrap::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 100%;
    background: #AD1E4B;
    z-index: -1; }

.footer__content {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: 30px; }

.footer__intro {
  font-size: 13px;
  line-height: 27px;
  color: #DDDDDD; }
  .footer__intro a {
    color: #fff; }

.footer__col {
  width: calc((100% - 60px) / 3); }
  .footer__col:first-child {
    flex: 1; }
  .footer__col:nth-child(2) {
    max-width: 290px; }
  .footer__col:last-child {
    max-width: 390px; }

.footer__title {
  font-size: 18px;
  line-height: 27px;
  font-weight: bold;
  margin-bottom: 24px; }

.footer__list {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 15px 30px; }
  .footer__list li {
    width: calc(50% - 15px); }
    .footer__list li a {
      font-size: 13px;
      line-height: 27px;
      color: #fff; }
      .footer__list li a i {
        margin-right: 4px; }

.footer__note {
  margin-top: 10px;
  font-size: 13px;
  line-height: 27px;
  color: #A3A3A3;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: 10px; }

.footer__bottom {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  padding: 16px 0; }
  .footer__bottom::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 100%;
    background: #222728;
    z-index: -1; }

.footer__gr {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  gap: 16px; }

.footer__nav {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap; }
  .footer__nav li:not(:last-child)::after {
    content: "-";
    margin: 0 8px; }
  .footer__nav li a {
    font-size: 13px;
    line-height: 27px;
    color: #C9C9C9; }

.footer__social {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px; }
  .footer__social a {
    font-size: 26px;
    color: #C9C9C9; }

/* Authentication Pages Styles */
.auth-container {
  max-width: 500px;
  margin: 40px auto;
  padding: 0 16px; }

.auth-wrapper {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  padding: 32px; }

.auth-header {
  text-align: center;
  margin-bottom: 32px; }
  .auth-header .auth-title {
    color: #AD1E4B;
    margin-bottom: 8px;
    font-size: 2rem; }
  .auth-header .auth-subtitle {
    color: #B9B9B9;
    font-size: 1rem; }

.auth-tabs {
  display: flex;
  justify-content: center;
  margin-bottom: 32px;
  border-bottom: 1px solid #CCCCCC; }
  .auth-tabs .auth-tab {
    padding: 16px 24px;
    color: #B9B9B9;
    text-decoration: none;
    font-weight: 500;
    position: relative;
    transition: color 0.3s ease; }
    .auth-tabs .auth-tab:hover {
      color: #D6336C; }
    .auth-tabs .auth-tab.active {
      color: #AD1E4B;
      font-weight: 700; }
      .auth-tabs .auth-tab.active:after {
        content: '';
        position: absolute;
        bottom: -1px;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: #AD1E4B; }

.auth-form {
  margin-bottom: 32px; }
  .auth-form .form-group {
    margin-bottom: 24px; }
  .auth-form .form-label {
    display: block;
    margin-bottom: 8px;
    color: #333;
    font-weight: 500; }
  .auth-form .form-control {
    width: 100%;
    padding: 16px;
    border: 1px solid #CCCCCC;
    border-radius: 4px;
    font-size: 1rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease; }
    .auth-form .form-control:focus {
      border-color: #D6336C;
      box-shadow: 0 0 0 2px rgba(214, 51, 108, 0.2);
      outline: none; }
  .auth-form .password-field {
    position: relative; }
    .auth-form .password-field .toggle-password {
      position: absolute;
      right: 16px;
      top: 50%;
      transform: translateY(-50%);
      background: none;
      border: none;
      color: #B9B9B9;
      cursor: pointer;
      padding: 0; }
      .auth-form .password-field .toggle-password:hover {
        color: #D6336C; }
  .auth-form .remember-me {
    display: flex;
    justify-content: space-between;
    align-items: center; }
    .auth-form .remember-me .checkbox {
      display: flex;
      align-items: center; }
      .auth-form .remember-me .checkbox input[type="checkbox"] {
        margin-right: 8px; }
    .auth-form .remember-me .forgot-password {
      color: #D6336C;
      text-decoration: none;
      font-size: 0.9rem; }
      .auth-form .remember-me .forgot-password:hover {
        text-decoration: underline; }
  .auth-form .terms-checkbox .checkbox {
    display: flex;
    align-items: flex-start; }
    .auth-form .terms-checkbox .checkbox input[type="checkbox"] {
      margin-right: 8px;
      margin-top: 4px; }
    .auth-form .terms-checkbox .checkbox a {
      color: #D6336C;
      text-decoration: none; }
      .auth-form .terms-checkbox .checkbox a:hover {
        text-decoration: underline; }
  .auth-form .auth-button {
    width: 100%;
    padding: 16px;
    background: linear-gradient(113.11deg, #AD1E4B 30%, #D6336C 100%);
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease; }
    .auth-form .auth-button:hover {
      transform: translateY(-2px);
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15); }
    .auth-form .auth-button:active {
      transform: translateY(0); }

.auth-divider {
  text-align: center;
  position: relative;
  margin: 32px 0; }
  .auth-divider:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background-color: #CCCCCC;
    z-index: 1; }
  .auth-divider span {
    position: relative;
    background-color: #fff;
    padding: 0 16px;
    color: #B9B9B9;
    z-index: 2; }

.social-login {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 32px; }
  .social-login .social-button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 500;
    transition: transform 0.3s ease, box-shadow 0.3s ease; }
    .social-login .social-button i, .social-login .social-button .zalo-icon {
      margin-right: 8px; }
    .social-login .social-button:hover {
      transform: translateY(-2px);
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); }
    .social-login .social-button.facebook {
      background-color: #1877F2;
      color: #fff; }
    .social-login .social-button.google {
      background-color: #fff;
      color: #757575;
      border: 1px solid #CCCCCC; }
    .social-login .social-button.apple {
      background-color: #000;
      color: #fff; }
    .social-login .social-button.zalo {
      background-color: #0068FF;
      color: #fff; }
      .social-login .social-button.zalo .zalo-icon {
        font-weight: bold;
        font-style: normal; }

.auth-footer {
  text-align: center; }
  .auth-footer a {
    color: #D6336C;
    text-decoration: none;
    font-weight: 700; }
    .auth-footer a:hover {
      text-decoration: underline; }

/* Responsive */
@media (max-width: 768px) {
  .auth-wrapper {
    padding: 24px; }
  .social-login {
    grid-template-columns: 1fr; } }

.truyenhd-breadcrumbs {
  margin-bottom: 20px;
  font-size: 14px;
  color: #666; }
  .truyenhd-breadcrumbs a {
    color: #333;
    text-decoration: none; }
    .truyenhd-breadcrumbs a:hover {
      text-decoration: underline; }
  .truyenhd-breadcrumbs .breadcrumb_last {
    color: #999; }

/* 
 * Styles for custom pages
 */
/* Trang Thể Loại */
.the-loai-archive {
  margin: 24px 0; }
  .the-loai-archive .the-loai-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px; }
    @media (max-width: 768px) {
      .the-loai-archive .the-loai-grid {
        grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 576px) {
      .the-loai-archive .the-loai-grid {
        grid-template-columns: 1fr; } }
  .the-loai-archive .the-loai-card {
    background-color: #fff;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease; }
    .the-loai-archive .the-loai-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); }
  .the-loai-archive .the-loai-title {
    font-size: 18px;
    margin: 0 0 8px; }
    .the-loai-archive .the-loai-title a {
      color: #187A97;
      text-decoration: none; }
      .the-loai-archive .the-loai-title a:hover {
        text-decoration: underline; }
  .the-loai-archive .the-loai-description {
    font-size: 14px;
    color: #333;
    margin-bottom: 16px;
    line-height: 1.5; }
    .the-loai-archive .the-loai-description p {
      margin: 0; }
  .the-loai-archive .the-loai-count {
    font-size: 13px;
    color: #333;
    margin-bottom: 8px; }
  .the-loai-archive .the-loai-link {
    display: inline-block;
    padding: 4px 8px;
    background-color: #187A97;
    color: #fff;
    border-radius: 4px;
    text-decoration: none;
    font-size: 14px;
    transition: background-color 0.2s ease; }
    .the-loai-archive .the-loai-link:hover {
      background-color: #187A97; }

.notify-top {
  width: 30%;
  max-width: 262px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: nowrap; }
  .notify-top * {
    color: #B9B9B9; }
  .notify-top__head {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    margin-bottom: 8px; }
  .notify-top__title {
    font-size: 20px;
    font-weight: 400;
    line-height: 1; }
    .notify-top__title i {
      margin-right: 4px; }
  .notify-top__more {
    font-size: 14px;
    line-height: 1; }
  .notify-top__content {
    width: 100%; }
  .notify-top__link {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
    font-size: 14px;
    line-height: 20px;
    position: relative;
    padding: 10px 0 10px 20px;
    border-bottom: 1px dashed rgba(204, 204, 204, 0.28); }
    .notify-top__link::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%);
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: #28A745; }
  .notify-top__date {
    background: #f8f8f8;
    padding: 0 8px;
    border-radius: 4px;
    font-size: 10px;
    flex-shrink: 0; }
  .notify-top__text {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden; }
  .notify-top__comment {
    flex-shrink: 0; }

.slide-top {
  flex: 1; }

.post-story {
  width: 30%;
  max-width: 262px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: 32px; }
  .post-story__gr {
    width: 100%; }
  .post-story__btn {
    background: linear-gradient(100.78deg, #FF1F4E 30%, #FECDD3 100%);
    box-shadow: 0px 2px 8px 0.56px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    height: 50px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
    font-size: 20px;
    line-height: 28px;
    color: #fff; }
  .post-story__label {
    max-width: fit-content;
    margin: 16px auto 0;
    font-size: 18px;
    line-height: 26px;
    font-weight: 500;
    color: #B9B9B9;
    position: relative; }
    .post-story__label::after {
      content: "";
      position: absolute;
      right: -40px;
      bottom: 8px;
      width: 30px;
      height: 54px;
      background: url("../images/common/icon/ic_arrow-point.png") no-repeat center;
      background-size: contain;
      mix-blend-mode: overlay; }
  .post-story__toolbar {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
    width: 100%; }
    .post-story__toolbar button {
      cursor: pointer;
      text-align: center;
      font-size: 12px;
      line-height: 18px;
      color: #AFAFAF;
      background: rgba(255, 255, 255, 0.25);
      backdrop-filter: blur(2px);
      border-radius: 5px;
      border: none;
      outline: none;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      flex-wrap: nowrap;
      gap: 4px;
      width: 46px; }
      .post-story__toolbar button i {
        display: block;
        font-size: 16px;
        color: #C5C5C5; }
  .post-story__icon {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    height: 40px;
    width: 100%; }
  .post-story__number {
    position: absolute;
    top: -8px;
    right: 0;
    width: 20px;
    height: 18px;
    line-height: 2;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.65);
    font-size: 10px;
    color: #fff;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap; }

.box {
  background: rgba(255, 255, 255, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 8px 0px 20px rgba(31, 38, 135, 0.37);
  backdrop-filter: blur(2px);
  border-radius: 10px;
  padding: 24px; }
  .box {
    flex: 1; }
  .box__title {
    font-family: "Oswald", sans-serif;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 16px;
    position: relative;
    display: flex;
    align-items: center; }
  .box.is-monopoly {
    width: 30%;
    max-width: 262px; }
  .box__title {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
    font-size: 20px;
    line-height: 28px;
    font-weight: 400;
    gap: 8px;
    margin-bottom: 24px; }
  .box__slide .swiper-pagination {
    position: relative;
    margin: 12px 0 0;
    bottom: auto !important;
    top: auto !important;
    left: auto;
    right: auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap; }
    .box__slide .swiper-pagination .swiper-pagination-bullet {
      background: #000;
      opacity: 1; }
      .box__slide .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
        background: linear-gradient(171.88deg, #1EBBF0 21.2%, #39DFAA 282.58%); }
  .box .monopoly__img {
    position: relative;
    max-width: 140px;
    margin: 0 auto; }
  .box .monopoly .rate {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 12px;
    line-height: 18px;
    color: #EAC100;
    background: rgba(0, 0, 0, 0.7);
    padding: 5px 0; }
  .box .monopoly .status {
    position: absolute;
    top: 10px;
    left: -8px;
    width: fit-content;
    padding: 0 10px;
    height: 28px;
    font-size: 12px;
    line-height: 20px;
    background: linear-gradient(113.12deg, #FF1F4E 30%, #FECDD3 100%);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    color: #fff;
    text-transform: uppercase; }
    .box .monopoly .status::after {
      content: "";
      position: absolute;
      bottom: -6px;
      left: 0;
      width: 0px;
      height: 0px;
      border-style: solid;
      border-width: 0 8px 6px 0;
      border-color: transparent #D6336C transparent transparent;
      transform: rotate(0deg); }
  .box .monopoly__title {
    font-size: 14px;
    line-height: 20px;
    font-weight: bold;
    color: #000;
    max-width: fit-content;
    margin: 12px auto 0; }
  .box .box-story__list {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: nowrap;
    flex-wrap: wrap;
    gap: 16px;
    padding: 0;
    margin: 0; }
  .box .box-story__item {
    width: calc((100% - 80px) / 6); }
  .box .box-story__link {
    overflow: hidden;
    display: block; }
  .box .box-story__img {
    position: relative;
    overflow: hidden;
    max-height: 120px; }
    .box .box-story__img img {
      height: 100%; }
  .box .box-story .time {
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(135deg, #4F93C3 0%, #2D6A9A 100%);
    font-size: 10px;
    line-height: 1;
    color: #fff;
    width: 50px;
    height: 50px;
    padding: 2px;
    display: block;
    clip-path: polygon(100% 0, 0 0, 0 100%);
    z-index: 2; }
    .box .box-story .time span {
      display: block; }
    .box .box-story .time .icon {
      position: absolute;
      top: 2px;
      left: 2px; }
    .box .box-story .time .text {
      position: absolute;
      top: 14px;
      left: 4px;
      transform: rotate(-45deg);
      white-space: nowrap; }
  .box .box-story__title {
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    transition: color 0.3s ease;
    margin-top: 4px; }

.final-push__bl {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: nowrap; }
  .final-push__bltit {
    font-size: 14px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-weight: 500;
    color: #000;
    margin-bottom: 15px; }
  .final-push__bl.first-class::before {
    content: "";
    display: block;
    width: 24px;
    height: 32px;
    background: url("../images/common/icon/ic_first-class.svg") no-repeat center/contain;
    margin-right: -50px; }

.final-push__gr {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  gap: 16px;
  font-size: 13px;
  line-height: 1;
  color: #747474; }
  .final-push__gr p {
    margin-bottom: 0; }

.final-push__img {
  width: 60px;
  position: relative;
  perspective: 60px;
  perspective-origin: 50% 50%;
  flex-shrink: 0;
  left: -10px; }
  .final-push__img img {
    transform: rotateY(-10deg); }
  .final-push__img::after {
    content: "";
    background: #EFEFEF;
    box-shadow: inset 0px 0px 5px #333333;
    width: 8px;
    height: 100%;
    position: absolute;
    top: -4px;
    right: -8px;
    transform: rotateY(10deg); }

.final-push__list {
  margin-top: 10px; }

.final-push__item {
  padding: 7px 0;
  border-bottom: 1px solid rgba(24, 122, 151, 0.11); }
  .final-push__item:first-child {
    border-top: 1px solid rgba(24, 122, 151, 0.11); }
  .final-push__item.second-class {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
    gap: 10px; }
    .final-push__item.second-class .final-push__link {
      width: calc(100% - 34px); }
    .final-push__item.second-class::before {
      content: "" !important;
      display: block;
      width: 24px;
      height: 32px;
      background: url("../images/common/icon/ic_second-class.svg") no-repeat center/contain;
      flex-shrink: 0; }
  .final-push__item.third-class {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
    gap: 10px; }
    .final-push__item.third-class .final-push__link {
      width: calc(100% - 34px); }
    .final-push__item.third-class::before {
      content: "" !important;
      display: block;
      width: 24px;
      height: 32px;
      background: url("../images/common/icon/ic_third-class.svg") no-repeat center/contain;
      flex-shrink: 0; }

.final-push__link {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  gap: 10px;
  font-size: 14px;
  line-height: 20px;
  color: #000; }

.final-push__text {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden; }

.final-push__price {
  font-size: 13px;
  color: #747474;
  width: fit-content;
  flex-shrink: 0; }

.recommend {
  padding: 50px 0; }
  .recommend__title {
    font-size: 30px;
    line-height: normal;
    font-weight: 400;
    margin-bottom: 50px;
    color: #000; }
  .recommend__list {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
    gap: 30px;
    flex-wrap: wrap;
    padding: 0;
    margin: 0; }

.card {
  width: calc((100% - 150px) / 6); }
  .card__img img {
    border-radius: 4px; }
  .card__content {
    margin-top: 10px; }
  .card__title {
    font-size: 18px;
    line-height: 22px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    color: #333; }
  .card__favorite {
    font-size: 13px;
    line-height: 20px;
    color: #FF5454;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
    margin: 10px 0 0; }
  .card__cate {
    font-size: 14px;
    line-height: 20px;
    color: #222728;
    display: flex;
    overflow: hidden;
    white-space: nowrap;
    margin: 10px 0 0; }
    .card__cate span:not(:last-child)::after {
      content: " / "; }

.new-chap__item {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  font-size: 14px;
  line-height: 20px;
  color: #000;
  border-bottom: 1px dashed #CCCCCC; }

.new-chap__title {
  flex: 1;
  text-align: left;
  border-right: 1px dashed #CCCCCC;
  padding: 10px 8px;
  color: #000; }

.new-chap__cate {
  width: 135px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-right: 1px dashed #CCCCCC;
  padding: 10px 8px; }
  .new-chap__cate a {
    color: #747474; }

.new-chap__time {
  width: 82px;
  color: #747474;
  padding: 10px 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; }

.rating .final-push__list {
  counter-reset: reset; }

.rating .final-push__item {
  counter-increment: rating;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  gap: 10px; }
  .rating .final-push__item::before {
    content: counter(rating);
    width: 24px;
    text-align: center; }

.rating .final-push__link {
  width: calc(100% - 34px); }

.contact {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  margin-top: 76px;
  padding: 60px 0; }
  .contact::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 100%;
    background: #F9F9FD;
    z-index: -1; }
  .contact__img {
    max-width: 332px;
    margin: 0 120px; }
  .contact__info {
    padding-left: 120px;
    position: relative; }
    .contact__info::before {
      content: "";
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 0;
      width: 2px;
      border-left: 2px solid #EDEDF8;
      height: 100%;
      max-height: 245px; }
  .contact__row {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
    gap: 60px; }
    .contact__row + .contact__row {
      margin-top: 20px; }
  .contact__icon {
    text-align: center;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    width: 65px; }
    .contact__icon i {
      font-size: 20px; }
    .contact__icon svg {
      width: 20px; }
    .contact__icon span {
      display: block;
      margin-top: 4px; }
  .contact__text {
    font-size: 14px;
    line-height: 20px;
    font-weight: 300;
    color: #333; }
    .contact__text span {
      display: block;
      color: #000;
      margin-top: 4px; }

/* Styles for Search Pages */
/* Search Header */
.search-header {
  margin-bottom: 20px; }
  .search-header .page-title {
    font-size: 24px;
    margin-bottom: 10px; }
    .search-header .page-title span {
      font-weight: bold;
      color: #187A97; }

/* Search Content Layout */
.search-content {
  display: flex;
  flex-wrap: wrap;
  gap: 20px; }
  .search-content .search-filters {
    flex: 0 0 250px;
    background-color: #f8f9fa;
    border-radius: 5px;
    padding: 15px; }
    @media (max-width: 768px) {
      .search-content .search-filters {
        flex: 0 0 100%; } }
    .search-content .search-filters .filter-title {
      font-size: 18px;
      margin-bottom: 15px;
      padding-bottom: 10px;
      border-bottom: 1px solid #e5e5e5; }
    .search-content .search-filters .filter-group {
      margin-bottom: 15px; }
      .search-content .search-filters .filter-group label {
        display: block;
        margin-bottom: 5px;
        font-weight: 500; }
      .search-content .search-filters .filter-group select {
        width: 100%;
        padding: 8px;
        border: 1px solid #ddd;
        border-radius: 4px; }
      .search-content .search-filters .filter-group .filter-submit {
        width: 100%;
        padding: 10px;
        background-color: #187A97;
        color: #fff;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-weight: 500; }
        .search-content .search-filters .filter-group .filter-submit:hover {
          background-color: #11566b; }
  .search-content .search-results {
    flex: 1; }
    .search-content .search-results .story-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 20px; }
      @media (max-width: 576px) {
        .search-content .search-results .story-grid {
          grid-template-columns: 1fr; } }
    .search-content .search-results .no-results {
      text-align: center;
      padding: 30px;
      background-color: #f8f9fa;
      border-radius: 5px; }
      .search-content .search-results .no-results h2 {
        margin-bottom: 10px;
        color: #dc3545; }

/* Story Card */
.story-card {
  display: flex;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: transform 0.3s ease; }
  .story-card:hover {
    transform: translateY(-5px); }
  .story-card .story-thumbnail {
    flex: 0 0 120px; }
    .story-card .story-thumbnail .story-cover {
      width: 100%;
      height: 100%;
      object-fit: cover; }
  .story-card .story-info {
    flex: 1;
    padding: 10px 15px; }
    .story-card .story-info .story-title {
      font-size: 16px;
      margin: 0 0 10px; }
      .story-card .story-info .story-title a {
        color: #333;
        text-decoration: none; }
        .story-card .story-info .story-title a:hover {
          color: #187A97; }
    .story-card .story-info .story-meta {
      font-size: 13px;
      color: #666;
      margin-bottom: 10px; }
      .story-card .story-info .story-meta > div {
        margin-bottom: 5px; }
        .story-card .story-info .story-meta > div i {
          width: 16px;
          margin-right: 5px;
          text-align: center; }
        .story-card .story-info .story-meta > div a {
          color: #666;
          text-decoration: none; }
          .story-card .story-info .story-meta > div a:hover {
            color: #187A97; }
    .story-card .story-info .story-description {
      font-size: 14px;
      color: #777; }
      .story-card .story-info .story-description p {
        margin: 0;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden; }

/* Pagination */
.pagination {
  margin-top: 30px;
  text-align: center; }
  .pagination .page-numbers {
    display: inline-block;
    padding: 5px 12px;
    margin: 0 3px;
    border: 1px solid #ddd;
    border-radius: 3px;
    color: #333;
    text-decoration: none; }
    .pagination .page-numbers.current {
      background-color: #187A97;
      color: #fff;
      border-color: #187A97; }
    .pagination .page-numbers:hover:not(.current) {
      background-color: #f5f5f5; }

/* Advanced Search Page */
.advanced-search-container .page-title {
  margin-bottom: 20px; }

.advanced-search-container .advanced-search-form {
  background-color: #f8f9fa;
  border-radius: 5px;
  padding: 20px;
  margin-bottom: 30px; }
  .advanced-search-container .advanced-search-form .search-row {
    margin-bottom: 20px; }
    .advanced-search-container .advanced-search-form .search-row:last-child {
      margin-bottom: 0; }
  .advanced-search-container .advanced-search-form .search-field-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500; }
  .advanced-search-container .advanced-search-form .search-field-group .keyword-search-group {
    display: flex;
    gap: 10px; }
    .advanced-search-container .advanced-search-form .search-field-group .keyword-search-group input[type="text"] {
      flex: 1;
      padding: 10px;
      border: 1px solid #ddd;
      border-radius: 4px; }
    .advanced-search-container .advanced-search-form .search-field-group .keyword-search-group .keyword-search-submit {
      background-color: #187A97;
      color: #fff;
      border: none;
      padding: 10px 15px;
      border-radius: 4px;
      cursor: pointer;
      font-weight: 500;
      white-space: nowrap;
      transition: background-color 0.3s; }
      .advanced-search-container .advanced-search-form .search-field-group .keyword-search-group .keyword-search-submit:hover {
        background-color: #11566b; }
  .advanced-search-container .advanced-search-form .search-field-group input[type="text"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px; }
  .advanced-search-container .advanced-search-form .search-field-group select {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-right: 10px; }
  .advanced-search-container .advanced-search-form .genre-checkboxes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px; }
    .advanced-search-container .advanced-search-form .genre-checkboxes .genre-checkbox {
      display: flex;
      align-items: center; }
      .advanced-search-container .advanced-search-form .genre-checkboxes .genre-checkbox input {
        margin-right: 5px; }
      .advanced-search-container .advanced-search-form .genre-checkboxes .genre-checkbox label {
        display: block;
        margin-bottom: 8px;
        font-weight: 500;
        color: #333; }
  .advanced-search-container .advanced-search-form .keyword-search-group {
    display: flex;
    gap: 10px; }
    .advanced-search-container .advanced-search-form .keyword-search-group input[type="text"] {
      flex: 1;
      padding: 8px 10px;
      border: 1px solid #ddd;
      border-radius: 4px;
      font-size: 14px; }
      .advanced-search-container .advanced-search-form .keyword-search-group input[type="text"]:focus {
        outline: none;
        border-color: #007bff;
        box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25); }
    .advanced-search-container .advanced-search-form .keyword-search-group .keyword-search-submit {
      background-color: #187A97;
      color: #fff;
      border: none;
      padding: 8px 15px;
      border-radius: 4px;
      cursor: pointer;
      font-weight: 500;
      white-space: nowrap;
      transition: background-color 0.3s; }
      .advanced-search-container .advanced-search-form .keyword-search-group .keyword-search-submit:hover {
        background-color: #11566b; }
  .advanced-search-container .advanced-search-form input[type="text"] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px; }
    .advanced-search-container .advanced-search-form input[type="text"]:focus {
      outline: none;
      border-color: #007bff;
      box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25); }
  .advanced-search-container .advanced-search-form .search-select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #fff;
    font-size: 14px;
    color: #333; }
    .advanced-search-container .advanced-search-form .search-select:focus {
      outline: none;
      border-color: #007bff;
      box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25); }
  .advanced-search-container .advanced-search-form .search-submit {
    background-color: #187A97;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    transition: background-color 0.3s; }
    .advanced-search-container .advanced-search-form .search-submit:hover {
      background-color: #11566b; }
  .advanced-search-container .advanced-search-form .search-buttons {
    display: flex;
    gap: 15px;
    justify-content: flex-start; }
    .advanced-search-container .advanced-search-form .search-buttons .search-submit, .advanced-search-container .advanced-search-form .search-buttons .filter-submit {
      background-color: #187A97;
      color: #fff;
      border: none;
      padding: 10px 20px;
      border-radius: 4px;
      cursor: pointer;
      font-weight: 500;
      transition: background-color 0.3s;
      flex: 1;
      max-width: 200px; }
      .advanced-search-container .advanced-search-form .search-buttons .search-submit:hover, .advanced-search-container .advanced-search-form .search-buttons .filter-submit:hover {
        background-color: #11566b; }
    .advanced-search-container .advanced-search-form .search-buttons .filter-submit {
      background-color: #6c757d; }
      .advanced-search-container .advanced-search-form .search-buttons .filter-submit:hover {
        background-color: #545b62; }

.advanced-search-container .search-results-title {
  margin-bottom: 20px;
  font-size: 20px; }

/* Styles for Taxonomy Pages */
.taxonomy-header {
  margin-bottom: 25px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee; }
  .taxonomy-header .taxonomy-title {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #187A97; }
  .taxonomy-header .taxonomy-description {
    font-size: 15px;
    color: #666;
    line-height: 1.6; }

.story-filter-bar {
  background-color: #f8f9fa;
  padding: 12px 15px;
  border-radius: 5px;
  margin-bottom: 25px; }
  .story-filter-bar .filter-options {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px; }
    .story-filter-bar .filter-options .filter-label {
      font-weight: 600;
      color: #333; }
    .story-filter-bar .filter-options .filter-option {
      padding: 5px 12px;
      border-radius: 4px;
      color: #666;
      text-decoration: none;
      transition: all 0.2s ease; }
      .story-filter-bar .filter-options .filter-option:hover {
        background-color: #e9ecef;
        color: #333; }
      .story-filter-bar .filter-options .filter-option.active {
        background-color: #187A97;
        color: #fff; }
  @media (max-width: 576px) {
    .story-filter-bar .filter-options {
      flex-direction: column;
      align-items: flex-start;
      gap: 10px; }
      .story-filter-bar .filter-options .filter-option {
        width: 100%;
        text-align: center; } }

.story-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 25px;
  margin-bottom: 30px; }
  @media (max-width: 576px) {
    .story-grid {
      grid-template-columns: 1fr; } }
  .story-grid .story-card {
    display: flex;
    flex-direction: column;
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease; }
    .story-grid .story-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); }
    .story-grid .story-card .story-thumbnail {
      position: relative;
      padding-top: 56.25%;
      /* 16:9 Aspect Ratio */
      overflow: hidden; }
      .story-grid .story-card .story-thumbnail img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s ease; }
      .story-grid .story-card .story-thumbnail:hover img {
        transform: scale(1.05); }
    .story-grid .story-card .story-info {
      padding: 15px;
      flex-grow: 1;
      display: flex;
      flex-direction: column; }
      .story-grid .story-card .story-info .story-title {
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 10px;
        line-height: 1.3; }
        .story-grid .story-card .story-info .story-title a {
          color: #333;
          text-decoration: none; }
          .story-grid .story-card .story-info .story-title a:hover {
            color: #187A97; }
      .story-grid .story-card .story-info .story-genres {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        margin-bottom: 10px; }
        .story-grid .story-card .story-info .story-genres .genre-tag {
          font-size: 12px;
          padding: 3px 8px;
          background-color: #f0f0f0;
          border-radius: 3px;
          color: #666;
          text-decoration: none; }
          .story-grid .story-card .story-info .story-genres .genre-tag:hover {
            background-color: #187A97;
            color: #fff; }
      .story-grid .story-card .story-info .story-meta {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
        font-size: 13px;
        color: #666; }
        .story-grid .story-card .story-info .story-meta .story-status {
          padding: 2px 8px;
          border-radius: 3px;
          background-color: #e6f7ff;
          color: #0066cc; }
      .story-grid .story-card .story-info .story-stats {
        margin-top: auto;
        display: flex;
        justify-content: space-between;
        font-size: 12px;
        color: #888; }
        .story-grid .story-card .story-info .story-stats span {
          display: flex;
          align-items: center; }
          .story-grid .story-card .story-info .story-stats span i {
            margin-right: 5px; }

.pagination {
  margin-top: 30px;
  text-align: center; }
  .pagination ul {
    display: inline-flex;
    list-style: none;
    padding: 0;
    margin: 0; }
    .pagination ul li {
      margin: 0 3px; }
      .pagination ul li a, .pagination ul li span {
        display: block;
        padding: 8px 12px;
        border: 1px solid #ddd;
        border-radius: 4px;
        color: #666;
        text-decoration: none; }
        .pagination ul li a:hover, .pagination ul li span:hover {
          background-color: #f5f5f5; }
      .pagination ul li span.current {
        background-color: #187A97;
        color: #fff;
        border-color: #187A97; }

.no-stories {
  padding: 40px 0;
  text-align: center; }
  .no-stories p {
    font-size: 18px;
    color: #666; }

/* Styles for Rank Page */
.rank-header {
  margin-bottom: 25px; }
  .rank-header .page-title {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #187A97; }
  .rank-header .rank-description {
    font-size: 16px;
    color: #666;
    line-height: 1.5; }

.rank-tabs {
  margin-bottom: 30px; }
  .rank-tabs .rank-tab-buttons {
    display: flex;
    margin-bottom: 20px;
    border-bottom: 1px solid #e5e5e5; }
    .rank-tabs .rank-tab-buttons .rank-tab-button {
      padding: 10px 20px;
      background: none;
      border: none;
      font-size: 16px;
      font-weight: 600;
      color: #666;
      cursor: pointer;
      position: relative;
      transition: all 0.3s ease; }
      .rank-tabs .rank-tab-buttons .rank-tab-button:hover {
        color: #187A97; }
      .rank-tabs .rank-tab-buttons .rank-tab-button.active {
        color: #187A97; }
        .rank-tabs .rank-tab-buttons .rank-tab-button.active:after {
          content: '';
          position: absolute;
          bottom: -1px;
          left: 0;
          width: 100%;
          height: 3px;
          background-color: #187A97; }
    @media (max-width: 576px) {
      .rank-tabs .rank-tab-buttons {
        flex-wrap: wrap; }
        .rank-tabs .rank-tab-buttons .rank-tab-button {
          flex: 1 0 50%;
          text-align: center; } }
  .rank-tabs .rank-tab-content {
    display: none; }
    .rank-tabs .rank-tab-content.active {
      display: block; }

.rank-list .rank-item {
  display: flex;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid #eee;
  transition: background-color 0.2s ease; }
  .rank-list .rank-item:hover {
    background-color: #f9f9f9; }
  .rank-list .rank-item .rank-number {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    color: #666;
    margin-right: 15px; }
    .rank-list .rank-item .rank-number.top-rank {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      color: #fff; }
      .rank-list .rank-item .rank-number.top-rank.rank-1 {
        background-color: #FFD700; }
      .rank-list .rank-item .rank-number.top-rank.rank-2 {
        background-color: #C0C0C0; }
      .rank-list .rank-item .rank-number.top-rank.rank-3 {
        background-color: #CD7F32; }
  .rank-list .rank-item .rank-thumbnail {
    width: 70px;
    height: 90px;
    margin-right: 15px;
    overflow: hidden;
    border-radius: 4px; }
    .rank-list .rank-item .rank-thumbnail img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.3s ease; }
      .rank-list .rank-item .rank-thumbnail img:hover {
        transform: scale(1.05); }
  .rank-list .rank-item .rank-info {
    flex: 1; }
    .rank-list .rank-item .rank-info .rank-title {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 8px; }
      .rank-list .rank-item .rank-info .rank-title a {
        color: #333;
        text-decoration: none; }
        .rank-list .rank-item .rank-info .rank-title a:hover {
          color: #187A97; }
    .rank-list .rank-item .rank-info .rank-meta .rank-genres {
      margin-bottom: 5px;
      font-size: 14px;
      color: #666; }
      .rank-list .rank-item .rank-info .rank-meta .rank-genres a {
        color: #666;
        text-decoration: none; }
        .rank-list .rank-item .rank-info .rank-meta .rank-genres a:hover {
          color: #187A97; }
    .rank-list .rank-item .rank-info .rank-meta .rank-stats {
      display: flex;
      gap: 15px;
      font-size: 13px;
      color: #888; }
      .rank-list .rank-item .rank-info .rank-meta .rank-stats span {
        display: flex;
        align-items: center; }
        .rank-list .rank-item .rank-info .rank-meta .rank-stats span i {
          margin-right: 5px; }
  @media (max-width: 576px) {
    .rank-list .rank-item {
      flex-wrap: wrap; }
      .rank-list .rank-item .rank-number {
        width: 25px;
        height: 25px;
        font-size: 14px;
        margin-right: 10px; }
      .rank-list .rank-item .rank-thumbnail {
        width: 60px;
        height: 80px;
        margin-right: 10px; }
      .rank-list .rank-item .rank-info .rank-title {
        font-size: 16px; }
      .rank-list .rank-item .rank-info .rank-meta .rank-stats {
        flex-direction: column;
        gap: 5px; } }

.no-rank-items {
  padding: 30px 0;
  text-align: center;
  font-size: 16px;
  color: #666; }

/**
 * Styles for slide-top component
 */
.slide-top {
  position: relative;
  overflow: hidden;
  border-radius: 8px; }
  .slide-top .swiper {
    width: 100%;
    height: 100%; }
  .slide-top .swiper-slide {
    text-align: center;
    background: #f8f8f8;
    display: flex;
    justify-content: center;
    align-items: center; }
    .slide-top .swiper-slide img {
      width: 100%;
      height: auto;
      display: block;
      object-fit: cover;
      max-height: 196px; }
    .slide-top .swiper-slide a {
      display: block;
      width: 100%;
      height: 100%; }
  .slide-top .swiper-button-next,
  .slide-top .swiper-button-prev {
    background: url("../images/common/icon/ic_arrow-white.svg") no-repeat center, linear-gradient(100.78deg, #FF1F4E 30%, #FECDD3 100%);
    box-shadow: 0px 2px 8px 0.56px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    width: 30px;
    height: 30px;
    margin: 0;
    top: 50%;
    transform: translateY(-50%); }
    .slide-top .swiper-button-next:after,
    .slide-top .swiper-button-prev:after {
      display: none; }
  .slide-top .swiper-button-prev {
    left: 8px; }
  .slide-top .swiper-button-next {
    transform: scaleX(-1) translateY(-50%);
    right: 8px; }