html, body {
    max-width: 100%;
    overflow-x: hidden;
    background-color: #ffe1f7;
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 10px;
    background-size: cover;

    min-height:100vh;
    display:flex;
    flex-direction:column;
}
main{
    flex:1;
}
/* BACKGROUND THEME */
/* 1. ĐỊNH NGHĨA BIẾN MÀU SẮC CHO 2 THEME */
/* 1. ĐỊNH NGHĨA BIẾN MÀU SẮC CHO 2 THEME (Giữ nguyên) */
:root {
  --bg-image: url('https://pub-a0cc60d51c6e4ebab81ee134d3dada9e.r2.dev/pink-theme.jpg');
  --button-bg: #ffeb78; 
  --button-text: #333333;
  --button-text1: #483d8b;
  --text-color: #333333;
}

[data-theme="dark"] {
  --bg-image: linear-gradient(rgba(0, 0, 0, 0.4)), url('https://pub-a0cc60d51c6e4ebab81ee134d3dada9e.r2.dev/blue-theme.jpg');
  --button-bg: #fad550; 
  --button-text: #333333;
    --button-text1: #ffffff;
  --text-color: #ffffff;
}

/* 2. CẤU HÌNH THẺ BODY KHÔNG CHỨA ẢNH TRỰC TIẾP */
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  color: var(--text-color);
  position: relative; /* Tạo gốc tọa độ cho lớp nền mờ bên dưới */
  z-index: 0;
  transition: color 0.3s ease;
}

/* 3. LỚP NỀN GIẢ CHỨA ẢNH VÀ LÀM BLUR (SỬA CHÍNH Ở ĐÂY) */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  /* Lấy ảnh nền từ biến hệ thống đã cài đặt */
  background-image: var(--bg-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  
  /* ĐỘ MỜ (BLUR): Tăng/giảm số px theo ý bạn (Ví dụ: 8px, 10px, 15px) */
  filter: blur(10px); 
  
  /* Phóng to nhẹ lớp nền (1.05) để triệt tiêu các vệt trắng bị lẹm ở 4 góc màn hình khi blur */
  transform: scale(1.05); 
  
  /* Đẩy lớp nền này nằm ẩn hẳn xuống dưới cùng */
  z-index: -1; 
  
  /* Tạo hiệu ứng chuyển đổi mượt mà khi người dùng đổi theme */
  transition: background-image 0.3s ease; 
}
/* Áp dụng biến này cho tất cả các nút bấm hoặc card truyện của bạn */
.comic-item, .theme-btn, .contact-link, .swiper-button-next, .swiper-button-prev, .comic-name, .comic-chapter, .navigation, navigation a, .search_button, .welcome_text, .view-more-button, first {
  background-color: var(--button-bg) !important;
  color: var(--button-text) !important;
  transition: all 0.3s ease;
}
.user_button i, .section-title {
    color: var(--button-text1) !important;
    transition: all 0.3s ease;
}

.swiper-button-next, .swiper-button-prev {
  border-radius: 15px;
  padding: 5px;
}

/* 3. CSS CHO SIDE MENU (ẨN/HIỆN VUỐT CẠNH) */
.menu-toggle-btn {
  position: fixed;
  bottom: 50px;
  left: 20px;
  z-index: 2003;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: none;
  font-size: 24px;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.side-menu {
  position: fixed;
  top: 0;
  left: -300px; /* Thụt về bên trái để ẩn đi */
  width: 280px;
  height: 100%;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  box-shadow: 5px 0 15px rgba(0,0,0,0.2);
  z-index: 2003;
  transition: left 0.3s ease;
  padding: 20px;
  box-sizing: border-box;
}
/* Nếu ở giao diện tối thì menu tự đổi nền tối */
[data-theme="dark"] .side-menu {
  background: rgba(30, 30, 30, 0.95);
}

.side-menu.open {
  left: 0; /* Vuốt ra khi có class .open */
}

.menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ddd;
  padding-bottom: 10px;
}

.close-btn {
  background: none;
  border: none;
  font-size: 28px;
  cursor: pointer;
  color: inherit;
}

.menu-content {
  margin-top: 20px;
}

.setting-item {
  margin-bottom: 20px;
}

.theme-options {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.theme-btn {
  flex: 1;
  padding: 8px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  opacity: 0.6;
}

.theme-btn.active {
  opacity: 1;
  font-weight: bold;
  outline: 2px solid #fff;
}

.contact-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  text-decoration: none;
  border-radius: 5px;
  font-weight: bold;
}

.menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.4);
  z-index: 1000;
  display: none;
}

.menu-overlay.show {
  display: block;
}

.menu-divider {
  border: 0;
  height: 1px;
  background: #ddd;
  margin: 20px 0;
}


/* ==========================================================================
   BỐ CỤC TRÊN ĐIỆN THOẠI (MOBILE) - Xử lý theo Hình 3
   ========================================================================== */
@media (max-width: 700px) {
  html, body {
    padding: 0;
    overflow-x: hidden;
  }
  .first_banner {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
  }

  .first_banner img {
    width: 70px;
    height: 70px;
  }

  .first_banner h1 {
    border-radius: 40px !important;
    padding: 10px;
    font-size: 2rem;
    margin: 0;
  }
  .search_bar {
    width: 160px!important;
  }
  .search_bar_form {
    width: 0.5rem;
  }

  .user_button {
    margin-left: 80px;
    gap: 15px;
  }

  .comics-grid {
    grid-template-columns: repeat(3, 1fr)!important;
    gap: 12px;
  }

  .comic-name {
    font-size: 12px;
  }

  .comic-chapter {
    font-size: 13px;
  }

  .comic-poster {
    border-radius: 15px;
  }
  .swiper-slide {
    width: 180px;
    height: 250px;
  }

  .slide-title {
    font-size: 12px;
    padding: 6px;
  }
  .navigation{

    width:100%;

    overflow-x:auto;

    flex-wrap:nowrap;

    justify-content:flex-start;

    white-space:nowrap;

    scrollbar-width:none;

    -ms-overflow-style:none;

}

.navigation::-webkit-scrollbar{
    display:none;
}

  .navigation::-webkit-scrollbar {
    display: none;
  }


  .navigation a {
    padding: 6px 10px;
    margin-left: 20px;
    font-size: 14px;
  }

   /* Chuyển Flex sang chiều dọc */
  .comic-main-info {
    flex-direction: column; 
    gap: 15px;
  }
  .comic-cover {
    width: 100%;
    height: auto!important;
    flex: unset;
    overflow: visible!important;
  }

  .comic-cover img {
    width: 100%;
    height: auto;
    object-fit: cover; /* hoặc cover nếu muốn full khung */
    display: block;
    border-radius: 10px;
  }
  .comic-detail-container {
    max-width: 95%;
    padding: 15px;
    margin: 10px auto;
  }

  /* Đẩy khoảng cách chữ giãn đều hợp lý trên mobile */
  .comic-details {
    padding: 0 5px;
  }

  .comic-title {
    font-size: 20px; /* Thu nhỏ cỡ chữ tiêu đề */
  }

  /* Ép các ô input của bình luận xếp dọc hàng đơn */
  .comment-inputs {
    flex-direction: column;
  }
  .comic-actions {
    flex-direction: column;
  align-items: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }

  .btn {
    width:200px;
    padding: 8px 12px;
    font-size: 14px;
    white-space: nowrap;
  }

}
.btn-nav:hover {
    justify-content: center;
    display: flex;
    box-sizing: border-box;
    align-items: center;
    gap: 20px;
}
.first_banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 20px;
}
.first_banner img {
    border-radius: 50%;
}.first_banner h1 {
    border-radius: 40px !important;
    padding: 10px;
    color: #f291ec;
    font-size: 2.5em;
    font-family: 'Mea Culpa';
}
.navigation{
    position:relative;

    margin:0 auto 20px;

    display:flex;

    justify-content:center;

    gap:20px;

    padding:10px;

    width:100%;

    max-width:100%;

    box-sizing:border-box;

    background:#f291ecb3;

    border-radius:40px;

    z-index:2000;
}
.navigation a {
    color: #6b325d;
    text-decoration: none;
    font-weight: bold;
    padding: 10px 20px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}
.navigation a:hover {
    background-color: #e070d1;
}
.search_bar_form {
  position: relative;
    margin: 0 2%;
    width: 30vw;
    display: flex;
    align-items: center;
    gap: 10px;
}
#search-result {
    position: absolute;
    top: 100%;
    left: 0;

    width: 100%;
    background: white;

    border-radius: 0 0 10px 10px;

    max-height: 400px;
    overflow-y: auto;

    z-index: 9999;

    box-shadow: 
    0 5px 15px rgba(0,0,0,.2);

    display: none;
}
.search-item{
    display: flex;
    gap: 10px;

    padding: 10px;
    text-decoration: none;
    color: black;

    transition: .2s;
}
.search-item:hover{
    background: #f2f2f2;
}
/* Ảnh */
.search-item img{
    width: 50px;
    height: 70px;

    object-fit: cover;
    border-radius: 5px;
}


/* Chữ */
.search-info h4{
    margin: 0;
    font-size: 14px;
}


.search-info p{
    margin: 5px 0 0;
    font-size: 12px;
    color: gray;
}
.search_bar {    
    padding: 5px 10px;
    border: 1px solid #ccc;
    border-radius: 30px;
    width: 90vw;
    height: 40px;
}
.search_button {
    background-color: #f291ec;
    border: none;
    color: white;
    padding: 10px 15px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    border-radius: 50%;
    cursor: pointer;
}
.search_button:hover {
    background-color: #e070d1;
}
.user_button {
    display: flex;
    gap: 30px;
}
.user_button a {
    color: #f291ec;
    font-size: 1.5em;
    text-decoration: none;
}
.user_button a:hover {
    color: #e070d1;
}
/* Định kích thước toàn bộ khung slide */
.swiper {
  width: 100%;
  padding-top: 50px;
  padding-bottom: 50px;
}
.swiper-wrapper {
  /* Ép trình duyệt bật tăng tốc phần cứng */
  display: flex !important; /* Ép buộc các slide xếp trên một hàng ngang cố định */
  align-items: center;
  will-change: transform;
}

/* Định kích thước cho từng tấm ảnh trong slide */
.swiper-slide {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background-position: center;
  background-size: cover;
  width: 300px; /* Chiều rộng của ảnh */
  height: 420px; /* Chiều cao của ảnh */
  border-radius: 10px; /* Bo góc ảnh */
  overflow: hidden;
  box-shadow: 0 15px 50px rgba(0,0,0,0.2); /* Tạo bóng đổ cho ảnh nổi bật */
  /* Giúp Swiper tính toán mượt mà, tránh bị nhảy cóc tọa độ khi trượt ngược */
  transform-style: preserve-3d;
  flex-shrink: 0;
  backface-visibility: hidden;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Tên truyện hiển thị phía dưới chân ảnh */
.slide-title {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.6); /* Nền đen trong suốt */
  color: #fff;
  padding: 10px;
  font-size: 16px;
  text-align: center;
}
/* Vùng bao quanh toàn bộ phần cập nhật */
.update-section {
  max-width: 1200px;
  margin: 40px auto;
  padding: 0 20px;
}

/* Tiêu đề "Cập nhật mới nhất" */
.section-title {
  font-size: 20px;/* Màu chữ hơi tím hồng giống thiết kế của bạn */
  margin-bottom: 20px;
  font-weight: bold;
}

/* Khung lưới hiển thị danh sách */
.comics-grid {
  display: grid;
  /* Tự động chia cột: mỗi cột rộng tối thiểu 160px, tối đa xếp đều màn hình (khoảng 6 cột trên PC) */
  grid-template-columns: repeat(6, minmax(160px, 1fr));
  gap: 25px 20px; /* Khoảng cách giữa các hàng là 25px, giữa các cột là 20px */
}

/* Từng block truyện */
.comic-item {
  border-radius: 25px;
  text-decoration: none; /* Bỏ gạch chân mặc định của thẻ <a> */
  display: flex;
  flex-direction: column;
  align-items: center; /* Căn giữa mọi thứ theo chiều ngang */
  transition: transform 0.2s ease;
}

/* Hiệu ứng nhấc nhẹ lên khi di chuột vào truyện */
.comic-item:hover {
  transform: translateY(-5px);
}

/* Khung bọc ảnh để xử lý bo góc */
.comic-poster {
  width: 100%;
  aspect-ratio: 3 / 4; /* Ép tỉ lệ ảnh luôn là chuẩn 3:4 giống như ảnh bìa truyện gốc */
  border-radius: 25px; /* Bo góc tròn sâu giống hệt ảnh mẫu */
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* Tạo bóng đổ mịn xung quanh ảnh */
}

/* Định dạng hình ảnh truyện bên trong */
.comic-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Giúp ảnh không bị bóp méo dù kích thước gốc ra sao */
}

/* Phần chữ bên dưới ảnh */
.comic-info {
   display:flex;
    flex-direction:column;
    flex:1;
  text-align: center;
  margin-top: 10px;
  width: 100%;
}
.comic-info p {
  margin: 0;
  padding: 0;
  flex: 2;
}

/* Tên truyện */
.comic-name {
  font-size: 14px;
  color: #555; /* Màu chữ xám đậm đằm thắm */
  margin: 0 0 4px 0;
  font-weight: 600;
  /* Giới hạn tên truyện tối đa 2 dòng, quá 2 dòng sẽ tự hiện dấu "..." */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1; /* Giúp tên truyện chiếm hết chiều cao còn lại của khung chữ */
}

/* Số chương (Chương 9, Chương 26...) */
.comic-chapter {
  font-size: 15px;
  color: #999; /* Màu xám nhạt hơn */
  border-radius: 0px 0px 15px 15px;
  padding: 10px;
}
.view-more-button {
  display: block;
  margin: 30px auto 0 auto;
  padding: 10px 20px;
  background-color: #f291ec;
  color: white;
  border: none;
  border-radius: 30px;
  font-size: 20px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  width: 200px;
  font-family: Arial, Helvetica, sans-serif;
}
.view-more-button:hover {
  background-color: #e070d1;
}

/*trang rieng cua truyen*/
.breadcrumb a {
  color: #553b53;
  text-decoration: none;
  font-size: 14px;
}
.breadcrumb a:hover {
  color: #e070d1;
}
/* Khung bao ngoài toàn bộ trang chi tiết */
.comic-detail-container {
  max-width: 1200px;
  margin: 20px auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  font-family: sans-serif;
}

.breadcrumb {
  font-size: 14px;
  color: #888;
  margin-bottom: 20px;
}

/* ==========================================================================
   BỐ CỤC TRÊN MÁY TÍNH (PC)
   ========================================================================== */
.comic-main-info {
  display: flex; /* Dùng flexbox để chia làm 2 bên */
  gap: 30px; /* Khoảng cách giữa ảnh bìa và cột chữ */
  margin-bottom: 40px;
}

/* Phần ảnh bìa cố định chiều rộng trên PC */
.comic-cover {
  flex: 0 0 400px!important;
  height: auto;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.comic-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Phần chi tiết bên phải */
.comic-details {
  flex: 1;
}

.comic-title {
  color: #444;
  font-size: 24px;
  margin-top: 0;
  margin-bottom: 10px;
}

.comic-meta {
  font-size: 14px;
  margin: 6px 0;
  color: #444;
}

/* Thống kê, Tags & Buttons */
.comic-stats {
  margin: 12px 0;
  font-size: 14px;
  color: #666;
}
.comic-stats span { margin-right: 15px; }

.comic-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 15px;
}
.tag {
  border: 1px solid #ccc;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 13px;
  color: #555;
}

.comic-actions {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}
.btn {
  padding: 8px 16px;
  border: none;
  border-radius: 20px;
  color: white;
  font-weight: bold;
  cursor: pointer;
}
.btn-read { background-color: #5cb85c; }
.btn-follow { background-color: #ff4757; }
.btn-like { background-color: #a55eea; }

.comic-summary {
  font-size: 14px;
  line-height: 1.6;
  color: #333;
  border-top: 1px dashed #eee;
  padding-top: 15px;
}

/* Danh sách chương & Bình luận (Hình 2) */
.section-heading {
  font-size: 18px;
  color: #7d5070;
  border-bottom: 2px solid #f1f1f1;
  padding-bottom: 8px;
  margin-top: 30px;
}

.chapters-list {
  border: 1px solid #eee;
  border-radius: 6px;
  overflow: hidden;
}

.chapter-item {
  display: flex;
  justify-content: space-between; /* Đẩy tên chương sang trái, ngày sang phải */
  padding: 12px 20px;
  border-bottom: 1px solid #eee;
}
.chapter-item:last-child { border-bottom: none; }
.chapter-item a { text-decoration: none; color: #333; }
.chapter-item a:hover { color: #ff4757; }
.chapter-date { color: #888; font-size: 13px; }

/* Khung bình luận */
.comment-box {
  border: 1px solid #eee;
  padding: 15px;
  border-radius: 6px;
}
.comment-inputs {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}
.comment-inputs input, .comment-textarea textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 20px;
  outline: none;
}
.comment-textarea {
  position: relative;
}
.comment-textarea textarea {
  height: 80px;
  resize: none;
  border-radius: 8px;
}
.btn-send-comment {
  position: absolute;
  right: 10px;
  bottom: 10px;
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
}


/*chap cua tung truyen*/
/* Khung bọc toàn trang */
.chapter-page-container {
  max-width: 1000px; /* Thu hẹp chiều rộng vùng đọc để dễ nhìn trên PC */
  margin: 0 auto;
  padding: 15px;
  position: relative;
  z-index: 2000;
}

/* ==========================================================================
   PHẦN HEADER & ĐIỀU HƯỚNG
   ========================================================================== 
   ,
            {
                "id": 9,
                "title": "Chap 9 - END",
                "date": "03/06/2026",
                "folder": "https://pub-a0cc60d51c6e4ebab81ee134d3dada9e.r2.dev/cai-the-loai-kim-chu-gi-the-nay/chap9",
                "pages": 32
            }
            ,
            */
.chapter-header {
  background-color: #fff;
  border: 1px solid #ebdcd5;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 25px;
  font-family: sans-serif;
  z-index: 2000;
}

.breadcrumb {
  font-size: 13px;
  color: #777;
  margin-bottom: 15px;
  z-index: 2000;
}

.chapter-title {
  font-size: 20px;
  color: #333;
  margin: 0 0 15px 0;
  font-weight: bold;
}

.update-time {
  font-size: 14px;
  color: #888;
  font-weight: normal;
}

/* Thanh thông báo màu xanh nhạt */
.navigation-notice {
  background-color: #d9edf7;
  color: #31708f;
  border: 1px solid #bce8f1;
  padding: 12px;
  border-radius: 4px;
  text-align: center;
  font-size: 14px;
  margin-bottom: 15px;
}

/* Vùng chứa nút chuyển chương */
.navigation-buttons {
  display: flex;
  justify-content: center;
  margin-top: 15px;
}
.active {
  background-color: #f291ec;
}

.btn-nav {
  display: inline-block;
  background-color: #7d5050; /* Màu nâu đỏ giống như trong ảnh */
  color: #fff;
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 14px;
  transition: background-color 0.2s;
}

.btn-nav:hover {
  background-color: #5a3939;
}

/* ==========================================================================
   PHẦN NỘI DUNG TRUYỆN (WEBTOON STYLE)
   ========================================================================== */
.chapter-content {
  display: flex;
  flex-direction: column; /* Xếp dọc các tấm ảnh */
  width: 100%;
  max-width: 800px; /* Độ rộng tối ưu để đọc truyện Webtoon không bị mỏi mắt */
  margin: 0 auto;
  background-color: #000; /* Thường để nền đen hoặc trắng tùy theo tone truyện */
  z-index: 2000;
}

.chapter-content img {
  width: 100%;
  height: auto;
  display: block; /* QUAN TRỌNG: Loại bỏ khoảng trống (gap) mặc định dưới chân ảnh */
  margin: 0;
  padding: 0;
  border: none;
  z-index: 2000;
}

/* ==========================================================================
   TỐI ƯU TRÊN ĐIỆN THOẠI (MOBILE)
   ========================================================================== */
@media (max-width: 768px) {
  .chapter-page-container {
    padding: 5px; /* Giảm bớt padding trên mobile để ảnh truyện to hơn */
  }
  
  .chapter-header {
    padding: 12px;
    border-radius: 4px;
  }

  .chapter-title {
    font-size: 16px;
  }

  .update-time {
    display: block; /* Xuống dòng cho gọn trên màn hình nhỏ */
    margin-top: 5px;
    font-size: 12px;
  }

  .navigation-notice {
    font-size: 12px;
    padding: 8px;
  }
}
/* Trạng thái mặc định của thanh công cụ */
.chapter-toolbar {
  position: fixed;
  bottom: 0; /* Đặt ở dưới đáy màn hình giống thiết kế của bạn, hoặc đổi thành top: 0 nếu muốn ở trên đỉnh */
  left: 0;
  width: 100%;
  height: 50px;
  background-color: #222222; /* Màu nền xám đen */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  box-sizing: border-box;
  z-index: 9999; /* Luôn nổi lên trên cùng của ảnh truyện */
  transition: transform 0.3s ease-in-out; /* Tạo hiệu ứng trượt mượt mà */
  box-shadow: 0 -2px 10px rgba(0,0,0,0.3);
}

/* Class này sẽ được JavaScript tự động thêm vào khi cuộn xuống */
.chapter-toolbar.hide {
  transform: translateY(100%); /* Trượt hẳn xuống dưới màn hình để ẩn (Nếu đặt trên đỉnh thì đổi thành translateY(-100%)) */
}

/* Định dạng các phần tử con bên trong */
.toolbar-item, .btn-arrow {
  background: none;
  border: none;
  color: #ffffff;
  font-size: 15px;
  cursor: pointer;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 5px;
}

.toolbar-item:hover, .btn-arrow:hover {
  color: #ff4757;
}

.toolbar-center {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-arrow i {
  font-size: 24px; /* Icon mũi tên to rõ ràng */
}

/* Ô dropdown chọn chương */
.chapter-select {
  background-color: #ffffff;
  color: #333333;
  border: 1px solid #cccccc;
  padding: 5px 15px;
  font-size: 14px;
  border-radius: 4px;
  outline: none;
  cursor: pointer;
  z-index: 2000;
}

.toolbar-right {
  display: flex;
  gap: 20px;
}

/*nut cuon dau trang*/
.scroll-top-btn {
    position: fixed;
    right: 20px;
    bottom: 60px;

    width: 50px;
    height: 50px;

    border: none;
    border-radius: 50%;

    background-color: #f291ec;
    color: white;

    display: flex;
    justify-content: center;
    align-items: center;

    cursor: pointer;
    z-index: 9999;

    display: none;

    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    z-index: 2000;
}

.scroll-top-btn i {
    font-size: 30px;
}

/* lop nen den trong che do DARK*/
#darkOverlay {
    position: fixed;
    inset: 0;

    background: rgba(0, 0, 0, 0.85);

    z-index: 1000;

    opacity: 0;
    visibility: hidden;

    transition: all 0.3s ease;

    pointer-events: none;
}

#darkOverlay.active {
    opacity: 1;
    visibility: visible;
}
footer {
    width: 100vw;
    text-align: center;
    padding: 20px;
    background-color: #f291ec;
    color: white;
    margin-top: 40px;
    font-family: Arial, Helvetica, sans-serif;
}
footer a {
    color: white;
    text-decoration: none;
    font-weight: bold;
}
footer a:hover {    color: #e070d1;
}
footer p {
    margin: 5px 0;
}
.continue-btn {
    display: block;
    margin-top: auto;
    padding: 10px 20px;
    background-color: #f291ec;
    color: white;
    border: none;
    border-radius: 30px;
    font-size: 20px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.continue-btn:hover {
    background-color: #e070d1;
}
.comic-info a {
    color: #ffffff;
    text-decoration: none;
}
.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #ffe1f7;
}
.login-box {
    background-color: #fff;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    text-align: center;
}
.login-box h1 {
    margin-bottom: 30px;
    color: #f291ec;
}
#google-login {
    background-color: #4285F4;
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
#google-login:hover {
    background-color: #357ae8;
} 
.header-avatar{
    width:40px;
    height:40px;

    border-radius:50%;
    object-fit:cover;
}
.user-profile{
    display:flex;
    align-items:center;
    gap:10px;
}

.user-link{
    display:flex;
    align-items:center;
    gap:10px;
    text-decoration:none;
    color:inherit;
}

.user-avatar{
    width:42px;
    height:42px;

    border-radius:50%;
    object-fit:cover;

    border:2px solid #ff87c8;
}

#logout-btn{
    padding:6px 10px;

    border:none;
    border-radius:8px;

    cursor:pointer;
}

.comments-list {
    margin-top: 20px;;
}

.comment{
    padding: 12px;
    border-bottom: 1px solid #ddd;
}

.comment > div{
    display: flex;
    align-items: center;
    gap: 10px;
}

.comment-avatar{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.comment h4{
    margin: 0;
    font-size: 15px;
    color: #333;
    font-weight: 600;
}

.comment p{
    margin: 8px 0 0 50px;
    font-size: 14px;
    line-height: 1.5;
    color: #555;
    word-break: break-word;
}

.comic-poster{

    position:relative;

}

.comic-end-badge{

    position:absolute;

    top:8px;

    left:8px;

    z-index:10;

    background:#ff3b30;

    color:#fff;

    font-size:12px;

    font-weight:700;

    padding:3px 8px;

    border-radius:6px;

    box-shadow:0 2px 8px rgba(0,0,0,.35);

}