@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&display=swap');
 /* Reset & Base Styles */
 * {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
 }

 body {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
   line-height: 1.5;
   background-color: #F4ECDE;
   color: #222;
 }

 a {
   text-decoration: none;
   color: inherit;
 }

 /* Header Styles */
 .header {
   background-color: #00677a;
   /* position: sticky; */
   top: 0;
   z-index: 30;
   width: 100%;
 }

 .nav-container {
   max-width: 1024px;
   margin: 0 auto;
   padding: 0 1rem;
   display: flex;
   justify-content: space-between;
   align-items: center;
   height: 50px;
 }

 .menu-button {
   color: white;
   padding: 0.5rem;
   border-radius: 0.5rem;
   background: none;
   border: none;
   cursor: pointer;
   transition: background-color 0.2s;
 }

 .menu-button:hover {
   background-color: #00272c;
 }

 .logo {
   color: white;
   font-size: 1.125rem;
   font-weight: bold;
 }

 .spacer {
   width: 2rem;
 }

 /* Sidebar Styles */
 .sidebar-backdrop {
   position: fixed;
   inset: 0;
   background-color: rgba(0, 0, 0, 0.5);
   z-index: 40;
   transition: opacity 0.2s;
   opacity: 0;
   visibility: hidden;
 }

 .sidebar-backdrop.visible {
   opacity: 1;
   visibility: visible;
 }

 .sidebar {
   position: fixed;
   top: 0;
   left: 0;
   height: 100%;
   width: 288px;
   max-width: 80vw;
   background-color: white;
   box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
   z-index: 50;
   transform: translateX(-100%);
   transition: transform 0.2s ease-out;
 }

 .sidebar.open {
   transform: translateX(0);
 }

 .sidebar-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 0.5rem;
   border-bottom: 1px solid #e5e7eb;
 }

 .sidebar-title {
   font-size: 1rem;
   font-weight: 500;
 }

 .close-button {
   padding: 0.5rem;
   border-radius: 9999px;
   background: none;
   border: none;
   cursor: pointer;
   transition: background-color 0.2s;
 }

 .close-button:hover {
   background-color: #f3f4f6;
 }

 .sidebar-content {
   height: calc(100% - 64px);
   overflow-y: auto;
   padding: 1rem;
 }

 /* Menu Items */
 .menu-section {
   margin-bottom: 1.5rem;
 }

 .menu-item {
   display: flex;
   align-items: center;
   gap: 0.75rem;
   padding: 0.75rem;
   border-radius: 0.5rem;
   color: #374151;
   transition: background-color 0.2s;
 }

 .menu-item:hover {
   background-color: #f3f4f6;
 }

 .menu-item span {
   flex: 1;
 }

 .category-section {
   margin-top: 1.5rem;
   padding-top: 1rem;
   border-top: 1px solid #e5e7eb;
 }

 .category-title {
   font-size: 0.875rem;
   font-weight: bold;
   color: #374151;
   margin-bottom: 0.75rem;
   padding-left: 0.5rem;
 }

 .category-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 0.25rem;
 }

 .category-item {
   padding: 0.5rem;
   border-radius: 0.25rem;
   font-size: 0.875rem;
   color: #4b5563;
   transition: background-color 0.2s;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }

 .category-item:hover {
   background-color: #f3f4f6;
   color: #111827;
 }

 /* Main Content */
 .main-content {
   max-width: 1024px;
   margin: 0 auto;
   padding: 1rem;
 }

 /* Search Input */
 .search-container {
   margin-bottom: 1.5rem;
 }

 .search-form {
   position: relative;
 }

 .search-input {
   width: 100%;
   padding: 0.75rem 1rem;
   padding-right: 100px;
   border: 1px solid #d1d5db;
   border-radius: 0.5rem;
   font-size: 1rem;
   color: #374151;
   background-color: white;
   transition: border-color 0.2s;
 }

 .search-input:focus {
   outline: none;
   border-color: #00899C;
   box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
 }

 .search-input:hover {
   border-color: #00272c;
 }

 .search-clear {
   position: absolute;
   right: 80px;
   top: 50%;
   transform: translateY(-50%);
   background: none;
   border: none;
   color: #9ca3af;
   cursor: pointer;
   padding: 0.25rem;
 }

 .search-clear:hover {
   color: #00272c;
 }

 .search-button {
   position: absolute;
   right: 0;
   top: 0;
   height: 100%;
   background-color: #00677a;
   color: white;
   border: none;
   border-radius: 0 0.5rem 0.5rem 0;
   padding: 0 1rem;
   cursor: pointer;
   display: flex;
   align-items: center;
   gap: 0.25rem;
   font-weight: 500;
   transition: background-color 0.2s;
 }

 .search-button:hover {
   background-color: #00272c;
 }

 /* Comics List */
 .comics-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (min-width: 768px) {
  .comics-list {
    grid-template-columns: repeat(6, 1fr);
  }
}
.comic-card {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  position: relative;
  display: flex;
  flex-direction: column;
}
.comic-thumbnail {
  position: relative;
  width: 100%;
  aspect-ratio: 3/4;
  overflow: hidden;
}
.comic-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.comic-meta-overlay {
  position: absolute;
  left: 0; right: 0; top: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 6px 8px;
  z-index: 2;
  width: 100%;
  pointer-events: none;
}
.comic-status {
  background: #ff9800;
  color: #fff;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 4px;
  pointer-events: auto;
  max-width: 60%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.comic-status.completed {
  background: #4caf50;
}
.comic-status.updating {
  background: #ff9800;
}
.comic-views {
  background: #ff9900c7;
  color: #fff;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
  pointer-events: auto;
}
.comic-update-time {
  font-size: 12px;
  font-style: italic;
  color: #888;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}
/* Comic Details */
.comic-details {
  padding: 8px 8px 12px 8px;
}
.comic-title {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 2.6em;
  max-height: 2.6em;
}
.comic-title a {
  color: #222;
  text-decoration: none;
  display: block;
  word-break: break-word;
}

 .section-title {
   font-size: 1.25rem;
   font-weight: bold;
   margin-bottom: 1rem;
   color: #00899C;
 }

 /* chapterlist content*/

 /* Body scroll lock */
 body.no-scroll {
   overflow: hidden;
 }

 /* Pagination Styles */
 .pagination {
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
   gap: 0.5rem;
   margin: 2rem 0;
 }

 .page-link {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-width: 2.5rem;
   padding: 0.5rem 0.75rem;
   border: 1px solid #d1d5db;
   border-radius: 0.375rem;
   color: #4b5563;
   font-weight: 500;
   transition: all 0.2s;
 }

 .page-link:hover {
   background-color: #f3f4f6;
   border-color: #9ca3af;
 }

 .page-link.current {
   background-color: #00899C;
   color: white;
   border-color: #00899C;
 }

 .page-link.prev-next {
   font-weight: 600;
 }

 .page-dots {
   display: inline-flex;
   align-items: flex-end;
   padding: 0 0.5rem;
   color: #9ca3af;
 }

 /* Css bổ sung*/
 /* Comic Card Link Styles - Colors & Shapes */

 /* Comic title link */
 .comic-title a {
   color: #00899C;
   font-weight: 600;
 }

 .comic-title a:hover {
   color: #00272c;
 }

 /* Status badges with different colors */
 .comic-status {
   display: inline-block;
   padding: 0.25rem 0.75rem;
   border-radius: 1rem;
   font-size: 0.7rem;
   font-weight: 600;
   letter-spacing: 0.025em;
 }

 .comic-status.completed {
   background-color: #dcfce7;
   color: #166534;
   border: 1px solid #bbf7d0;
 }

 .comic-status.updating {
   background-color: #fef3c7;
   color: #92400e;
   border: 1px solid #fde68a;
 }

 /* Alternative class names for Vietnamese status */
 .comic-status[data-status="Hoàn thành"],
 .comic-status:contains("Hoàn thành") {
   background-color: #dcfce7;
   color: #166534;
   border: 1px solid #bbf7d0;
 }

 .comic-status[data-status="Đang cập nhật"],
 .comic-status:contains("Đang cập nhật") {
   background-color: #fef3c7;
   color: #92400e;
   border: 1px solid #fde68a;
 }

 /* Author link styling */
 .comic-info a[href*="tac-gia"] {
   color: #4b5563;
   padding: 2px 6px;
   border-radius: 4px;
   background-color: #f9fafb;
   border: 1px solid #e5e7eb;
 }

 .comic-info a[href*="tac-gia"]:hover {
   color: #00272c;
   background-color: #f3f4f6;
   border-color: #d1d5db;
 }

 /* Category tags styling */
 .comic-info a[href*="the-loai"] {
   display: inline-block;
   margin-right: 6px;
   margin-bottom: 4px;
   padding: 4px 10px;
   background-color: #eff6ff;
   color: #1e40af;
   border-radius: 12px;
   font-size: 0.7rem;
   font-weight: 500;
   border: 1px solid #dbeafe;
 }

 .comic-info a[href*="the-loai"]:hover {
   background-color: #dbeafe;
   color: #00272c;
   border-color: #bfdbfe;
 }

 /* Comic Card deatail Styles */
 .comic-detail-info a[href*="tac-gia"] {
   color: #4b5563;
   padding: 2px 6px;
   border-radius: 4px;
   background-color: #f9fafb;
   border: 1px solid #e5e7eb;
 }

 .comic-detail-info a[href*="tac-gia"]:hover {
   color: #1f2937;
   background-color: #f3f4f6;
   border-color: #d1d5db;
 }

 /* Category tags styling */
 .comic-detail-info a[href*="the-loai"] {
   display: inline-block;
   margin-right: 6px;
   margin-bottom: 4px;
   padding: 4px 10px;
   background-color: #eff6ff;
   color: #1e40af;
   border-radius: 12px;
   font-size: 0.7rem;
   font-weight: 500;
   border: 1px solid #dbeafe;
 }

 .comic-detail-info a[href*="the-loai"]:hover {
   background-color: #dbeafe;
   color: #00272c;
   border-color: #bfdbfe;
 }

 /* Views counter styling */


 /* Card hover effect (subtle) */
 .comic-card:hover {
   box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
 }

 /* Thumbnail styling */
 .comic-thumbnail {
   border-radius: 8px 0 0 8px;
   overflow: hidden;
 }

 /* Focus states for accessibility */
 .comic-title a:focus,
 .comic-info a:focus {
   outline: 2px solid #00899C;
   outline-offset: 2px;
   border-radius: 4px;
 }

 /* Comic Detail Container */
 .comic-detail-container {
   max-width: 1024px;
   margin: 0 auto;
   padding: 1rem;
 }

 .space-y-4>*+* {
   margin-top: 1rem;
 }

 /* Comic Info Card */
 .comic-info-card {
   background-color: white;
   border-radius: 0.5rem;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 }

 .comic-info-content {
   padding: 1rem;
 }

 /* Thumbnail Section */
 .thumbnail-container {
   display: flex;
   justify-content: center;
   margin-bottom: 1rem;
 }

 .thumbnail-wrapper {
   position: relative;
   width: 192px;
   aspect-ratio: 3/4;
 }

 .thumbnail-image {
   width: 100%;
   height: 100%;
   object-fit: cover;
   border-radius: 0.375rem;
 }

 /* Comic Info Sections */
 .info-space-y-3>*+* {
   margin-top: 0.75rem;
 }

 .info-space-y-3 a:hover {
   color: #00272c;
 }

 .comic-detail-title {
   font-size: 1.25rem;
   text-align: center;
   font-weight: bold;
   color: #1f2937;
 }

 /* Grid Layout for Status and Views */
 .info-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 0.5rem;
   font-size: 0.875rem;
 }

 .info-item {
   display: flex;
   align-items: center;
   gap: 0.25rem;
 }

 .info-label {
   font-weight: 600;
 }

 /* Status Badge */
 .status-badge {
   padding: 0.125rem 0.375rem;
   border-radius: 0.25rem;
   font-size: 0.75rem;
   font-weight: 500;
 }

 .status-completed {
   background-color: #dcfce7;
   color: #166534;
 }

 .status-updating {
   background-color: #fef3c7;
   color: #92400e;
 }

 /* Views with Icon */
 .views-container {
   display: flex;
   align-items: center;
   gap: 0.25rem;
 }

 .eye-icon {
   width: 16px;
   height: 16px;
   flex-shrink: 0;
 }

 /* Author and Categories Section */
 .details-space-y-2>*+* {
   margin-top: 0.5rem;
 }

 .detail-item {
   display: flex;
   gap: 0.25rem;
   align-items: baseline;
   font-size: 0.875rem;
 }

 .detail-label {
   font-weight: 600;
   flex-shrink: 0;
 }

 .primary-link {
   color: #00899C;
 }

 .primary-link:hover {
   color: #00272c;
 }

 .primary-text {
   color: #00899C;
 }

 /* Categories */
 .categories-container {
   display: flex;
   flex-wrap: wrap;
   gap: 0.25rem;
 }

 /* Description */
 .description {
   margin-top: 0.25rem;
   color: #6b7280;
   white-space: pre-line;
 }

 /* Responsive */
 @media (max-width: 768px) {
   .comic-detail-container {
     padding: 0.5rem;
   }

   .thumbnail-wrapper {
     width: 160px;
   }

 

   .info-grid {
     grid-template-columns: 1fr;
     gap: 0.75rem;
   }
 }

 /* chapter tyle */
 /* Chapters Container */
 .chapters-container {
   max-width: 1024px;
   margin: 0 auto;
   padding: 1rem;
 }

 .chapters-list {
   background-color: white;
   border-radius: 0.5rem;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
   overflow: hidden;
 }

 /* Chapter Item */
 .chapter-item {
   display: block;
   padding: 0.75rem;
   border-bottom: 1px solid #f3f4f6;
   transition: background-color 0.2s ease;
 }

 .chapter-item:last-child {
   border-bottom: none;
 }

 .chapter-item:hover {
   background-color: #f9fafb;
 }

 .chapter-list-content {
   display: flex;
   justify-content: space-between;
   align-items: center;
   font-size: 0.875rem;
 }

 .chapter-name {
   color: #374151;
   transition: color 0.2s ease;
 }

 .chapter-item:hover .chapter-name {
   color: #00899C;
 }

 /* Section Title */
 .section-title {
   font-size: 1.125rem;
   font-weight: 600;
   color: #1f2937;
   margin-bottom: 1rem;
   padding: 0 0.25rem;
 }

 /* Responsive */
 @media (max-width: 768px) {
   .chapters-container {
     padding: 0.5rem;
   }

   .chapter-item {
     padding: 1rem 0.75rem;
   }

   .chapter-content {
     font-size: 0.9rem;
   }
 }

 /* Focus states for accessibility */
 .chapter-item:focus {
   outline: 2px solid #00899C;
   outline-offset: -2px;
 }

 /* Alternative styling - Card style */
 .chapters-grid {
   display: grid;
   gap: 0.5rem;
   grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
 }

 .chapter-card {
   background-color: white;
   border-radius: 0.375rem;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
   padding: 0.75rem;
   transition: all 0.2s ease;
 }

 .chapter-card:hover {
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
   transform: translateY(-1px);
 }

 .chapter-card .chapter-name {
   font-weight: 500;
 }


 /* chapter detail */
 /* Container */
 .chapter-container {
   max-width: 56rem;
   margin: 0 auto;
   padding: 1rem;
 }

 /* Search Chapter Section */
 .chapter-search-container {
   display: flex;
   justify-content: center;
   margin-bottom: 1.5rem;
 }

 .chapter-search-form {
   display: flex;
   align-items: center;
   gap: 0.5rem;
   max-width: 400px;
   width: 100%;
 }

 .chapter-search-input {
   flex: 1;
   padding: 0.75rem 1rem;
   border: 1px solid #d1d5db;
   border-radius: 0.375rem;
   font-size: 1rem;
   outline: none;
   transition: border-color 0.2s;
   min-width: 120px;
 }

 .chapter-search-input:focus {
   border-color: #00899C;
   box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
 }

 .chapter-search-btn {
   display: flex;
   align-items: center;
   gap: 0.5rem;
   background: #00899C;
   color: #fff;
   border: none;
   border-radius: 0.375rem;
   padding: 0.75rem 1rem;
   font-size: 1rem;
   cursor: pointer;
   transition: background 0.2s;
   white-space: nowrap;
 }

 .chapter-search-btn:hover {
   background: #00272c;
 }

 /* Header Section */
 .chapter-header {
   text-align: center;
   margin-bottom: 1.5rem;
 }

 .comic-chapter-title {
   font-size: 1.25rem;
   font-weight: bold;
   color: #1f2937;
   margin-bottom: 0.75rem;
 }

 .chapter-title-divider {
   height: 1px;
   background-color: #e5e7eb;
   width: 6rem;
   margin: 0 auto;
   margin-bottom: 0.75rem;
 }

 .chapter-title {
   font-size: 1.125rem;
   font-weight: 500;
   color: #374151;
 }

 /* Chapter Content */
 .chapter-content {
   padding: 1rem;
   border-radius: 0.5rem;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
   font-size: 1.125rem;
   line-height: 2;
   color: #1f2937;
   margin-bottom: 2rem;
   text-align: justify;
   font-family: 'Merriweather', 'Times New Roman', Times, serif;
 }
 .chapter-content img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0.5rem auto;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

 /* Navigation Buttons */
 .chapter-navigation {
   display: flex;
   justify-content: space-between;
   margin-top: 2rem;
   gap: 1rem;
 }

 .chapter-nav-button {
   display: flex;
   align-items: center;
   gap: 0.5rem;
   padding: 0.75rem 1rem;
   border-radius: 0.375rem;
   font-weight: 500;
   transition: all 0.2s;
   flex: 1;
   text-align: center;
   justify-content: center;
 }

 .chapter-nav-button.prev {
   background-color: #00899C;
   color: white;
 }

 .chapter-nav-button.next {
   background-color: #00899C;
   color: white;
 }

 .chapter-nav-button:hover {
   opacity: 0.9;
   background-color: #00272c;
 }

 .chapter-nav-button.disabled {
   opacity: 0.5;
   cursor: not-allowed;
 }

 /* chapter banner */

 .chapter-banner {
  margin-top: 24px;
  text-align: center;
}
.chapter-banner img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  display: inline-block;
}
@media (max-width: 600px) {
  .chapter-banner img {
    max-width: 98vw;
  }
}

 /* Responsive */
 @media (max-width: 768px) {
   .chapter-container {
     padding: 0.75rem;
   }

   .chapter-content {
     padding: 1.5rem;
     font-size: 1rem;
   }

   .chapter-search-form {
     max-width: 100%;
   }

   .chapter-search-btn span {
     display: inline;
   }

   .chapter-navigation {
     flex-direction: row;
   }
 }

 @media (max-width: 500px) {
   .chapter-search-input {
     padding: 0.75rem;
   }

   .chapter-search-btn {
     padding: 0.75rem;
   }

   .chapter-nav-button {
     padding: 0.75rem;
     font-size: 0.9rem;
   }
 }

 @media (max-width: 400px) {
   .chapter-search-btn span {
     display: none;
   }

   .chapter-search-btn {
     min-width: 40px;
     justify-content: center;
   }

   .chapter-nav-button span {
     font-size: 0.8rem;
   }
 }

 /* Comics List history Container */
 .comics-list-history {
   display: flex;
   flex-direction: column;
   gap: 1rem;
   max-width: 1024px;
   margin: 0 auto;
 }

 /* Comic Card */
 .comic-card-history {
   background-color: white;
   border-radius: 0.5rem;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
   overflow: hidden;
 }

 .comic-content-history {
   display: flex;
 }

 /* Thumbnail */
 .comic-thumbnail-history {
   width: 80px;
   flex-shrink: 0;
 }

 @media (min-width: 640px) {
   .comic-thumbnail-history {
     width: 112px;
   }
 }

 @media (min-width: 768px) {
   .comic-thumbnail-history {
     width: 128px;
   }
 }

 .thumbnail-container-history {
   position: relative;
   aspect-ratio: 3/4;
 }

 .thumbnail-image {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }

 /* Comic Details */
 .comic-details-history {
   flex: 1;
   padding: 0.5rem;
 }

 @media (min-width: 640px) {
   .comic-details-history {
     padding: 0.75rem;
   }
 }

 .comic-title-history {
   font-size: 0.875rem;
   font-weight: bold;
   margin-bottom: 0.375rem;
   color: #00899C;
 }

 @media (min-width: 640px) {
   .comic-title-history {
     font-size: 1rem;
     margin-bottom: 0.5rem;
   }
 }

 .comic-title-history a:hover {
   color: #00272c;
 }

 /* Status */
 .comic-meta {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 0.25rem;
   margin-bottom: 0.5rem;
   font-size: 0.75rem;
 }

 @media (min-width: 640px) {
   .comic-meta {
     gap: 0.5rem;
     font-size: 0.875rem;
   }
 }

 .comic-status {
   display: inline-block;
   padding: 0.125rem 0.5rem;
   border-radius: 0.25rem;
   font-size: 0.75rem;
   font-weight: 500;
 }

 .status-completed {
   background-color: #dcfce7;
   color: #166534;
 }

 .status-updating {
   background-color: #fef3c7;
   color: #92400e;
 }

 /* Chapter Info */
 .chapter-info-history {
   display: flex;
   flex-direction: column;
   gap: 0.25rem;
   color: #6b7280;
   font-size: 0.75rem;
   margin-top: 0.5rem;
 }

 .current-chapter-history {
   display: flex;
   align-items: center;
   gap: 0.25rem;
 }

 .current-chapter-history a {
   color: #00899C;
 }

 .current-chapter-history a:hover {
   color: #00272c;
 }

 /* New Chapters */
 .new-chapters {
   margin-top: 0.25rem;
 }

 .new-chapters-header {
   display: flex;
   align-items: center;
   gap: 0.5rem;
   margin-bottom: 0.25rem;
 }

 .new-chapters-title {
   font-weight: 600;
   color: #00899C;
 }

 .new-chapters-list {
   display: flex;
   flex-wrap: wrap;
   gap: 0.25rem;
 }

 .chapter-link {
   color: #00899C;
   background-color: #f3f4f6;
   padding: 0.125rem 0.375rem;
   border-radius: 0.25rem;
   font-size: 0.75rem;
 }

 .chapter-link:hover {
   color: #00272c;
   background-color: #e5e7eb;
 }


 .catauth-list {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
   margin: 24px 0;
   justify-content: center;
 }

 .catauth-item {
   display: inline-block;
   padding: 10px 20px;
   background: #f3f4f6;
   color: #222;
   border-radius: 20px;
   text-decoration: none;
   font-weight: 500;
   transition: background 0.2s, color 0.2s;
   border: 1px solid #e5e7eb;
 }

 .catauth-item:hover {
   background: #00899C;
   color: #fff;
   border-color: #00899C;
 }

 /* breakcrum */

 .breadcrumb {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 15px;
  margin-bottom: 14px;
}
.breadcrumb li:not(:last-child)::after {
  content: "›";
  margin-left: 8px;
  color: #999;
}
.breadcrumb a {
  color: #005366;
  text-decoration: none;
  font-weight: 600;
}
.breadcrumb [aria-current="page"] {
  color: #333;
  font-weight: bold;
}