body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  /* Nền xanh dương nhạt cho toàn trang để trông hiện đại hơn */
  background-color: #e6f2ff;
  color: #333;
  /* tăng kích cỡ chữ toàn trang để dễ đọc hơn; đặt mặc định 1.3em */
  font-size: 1.3em;
}

.container {
  /* tăng chiều rộng tổng thể để chứa sidebar lớn hơn và nội dung */
  max-width: 1100px;
  margin: 20px auto;
  padding: 1em 2em;
  /* hộp nội dung với nền hơi xanh để tách khỏi nền trang */
  background-color: #f7faff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  min-height: 90vh;
}

.content-wrapper {
  display: flex;
}

aside.sidebar {
  /* tăng chiều ngang cho cột thể loại để không bị xuống hàng khi tên dài */
  /* Mở rộng cột thể loại bên trái để dễ đọc hơn */
  /* tăng chiều ngang cột thể loại lên gấp đôi so với bản trước (600px -> 800px) */
  width: 800px;
  margin-right: 1em;
  /* nền sidebar hơi xanh để đồng nhất với tông màu trang */
  background-color: #eaf3ff;
  padding: 0.5em;
  border-radius: 6px;
  word-wrap: break-word;
}

aside.sidebar h3 {
  margin-top: 0;
}

aside.sidebar ul {
  list-style: none;
  padding: 0;
}

aside.sidebar li {
  margin-bottom: 0.5em;
}

aside.sidebar a {
  color: #0056b3;
  text-decoration: none;
}

aside.sidebar a:hover {
  text-decoration: underline;
}

/* Khoảng trắng giữa các nhóm thể loại trong sidebar */
aside.sidebar li.group-separator {
  list-style: none;
  margin: 0.7em 0;
  height: 0;
}

/* Màu sắc đặc biệt cho các thể loại đầu tiên và chữ hoa */
aside.sidebar li.special-cat > a {
  color: #c89a00; /* vàng đậm */
  font-weight: bold;
}
aside.sidebar li.uppercase-cat > a {
  color: #006400; /* xanh lá cây đậm */
  font-weight: bold;
}

/* Section hiển thị phim theo các thể loại được chọn ở trang chính */
.selected-categories {
  margin-bottom: 2em;
}

/* Mỗi category-section chứa danh sách phim của một thể loại */
.category-section {
  margin-top: 2em;
  border-top: 2px solid #ccc;
  padding-top: 1em;
}

.search-form {
  /* bỏ margin-top để form nằm cân bằng theo chiều dọc trong header */
  margin-top: 0;
  /* hiển thị ô tìm kiếm và nút trên cùng một hàng */
  display: flex;
  align-items: center;
}

.search-form input[type="text"] {
  padding: 0.25em 0.5em;
  border: 1px solid #ccc;
  border-radius: 4px;
  /* tạo khoảng cách hợp lý giữa ô tìm kiếm và nút */
  margin-right: 0.5em;
  /* đặt chiều rộng cụ thể cho ô tìm kiếm để tránh đẩy nút xuống dòng */
  /* đặt chiều rộng cụ thể và dùng !important để ghi đè quy tắc input[type="text"] chung */
  width: 200px !important;
}

.search-form button {
  padding: 0.3em 0.8em;
  background-color: #0056b3;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  /* bỏ margin-left vì đã dùng margin-right ở ô tìm kiếm */
  margin-left: 0;
}

.search-form button:hover {
  background-color: #004899;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1em;
  padding: 0.5em 1em;
  background-color: #007bff;
  color: #fff;
  border-radius: 6px;
}

header h1 {
  font-size: 24px;
  margin: 0;
  color: #fff;
}

header .home-link {
  text-decoration: none;
  color: #fff;
}

nav a {
  /* bỏ khoảng cách mặc định; khoảng cách được tạo bởi dấu phân cách */
  margin-right: 0;
  text-decoration: none;
  color: #ffffff;
  font-weight: bold;
}

nav a:hover {
  text-decoration: underline;
}

/* dấu phân cách giữa các liên kết điều hướng */
nav .separator {
  margin: 0 0.5em;
  color: #ffffff;
}

ul.story-list {
  list-style: none;
  padding: 0;
}

ul.story-list li {
  margin-bottom: 1.5em;
  border-bottom: 1px solid #ddd;
  padding-bottom: 1em;
}

ul.story-list li:last-child {
  border-bottom: none;
}

.meta {
  font-size: 0.9em;
  color: #666;
}

form .form-group {
  margin-bottom: 1em;
}

input[type="text"],
input[type="email"],
textarea {
  width: 100%;
  padding: 0.5em;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

button {
  padding: 0.5em 1em;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

/* Bình luận */
.comments-section {
  margin-top: 2em;
}
.comment-list .comment {
  border-top: 1px solid #ccc;
  padding: 0.5em 0;
}
.comment-list .comment-meta {
  font-size: 0.9em;
  color: #555;
  margin-bottom: 0.5em;
}
.comment-form small {
  display: block;
  font-size: 0.8em;
  color: #666;
  margin-top: 0.25em;
}

/*
 * Video input fields and previews
 * Ensure each URL input appears above its preview, has the same width as
 * the preview (400px) and adequate spacing between inputs/previews.
 */

/*
 * Video input fields and previews
 * Each video entry consists of a URL input and a preview iframe.
 * Inputs live inside a responsive grid defined by .video-grid and .video-item.
 */
.video-input {
  /* Inputs should span the full width of their container */
  display: block;
  width: 100%;
  /* Add a small margin above each input to separate it from the previous preview */
  margin-top: 0.5em;
}

/* Container for a set of video inputs/previews arranged in rows of three */
.video-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
}

/* Each video item occupies roughly one third of the available width,
   capped at the typical preview size */
.video-item {
  flex: 1 0 calc(33.333% - 1em);
  /* Giảm kích thước khung preview trong trang upload */
  max-width: 300px;
}

/* Ensure the input within a video item uses the full available width */
.video-item input[type="url"] {
  width: 100%;
  /* giảm khoảng cách giữa ô nhập URL và khung preview xuống hơn nữa để sát hơn */
  margin-top: 0.15em;
}

/* Style the preview iframe inside a video item */
.video-item iframe {
  width: 100%;
  /* Giảm chiều cao khung preview ở trang upload để hình chữ nhật nhỏ hơn */
  height: 180px;
  /* Giảm khoảng cách giữa ô nhập URL và khung xem xuống một nửa */
  margin-top: 0.1em;
  margin-bottom: 1em;
  display: block;
}

/* Center video players on the story page */
.video-section {
  text-align: center;
}

.video-section iframe {
  display: block;
  /* Center the iframe horizontally */
  margin-left: 0;
  margin-right: auto;
  /* retain top and bottom margins for spacing */
  margin-top: 1em;
  margin-bottom: 1em;
  /* tăng kích thước khung video để xem phim thoải mái hơn */
  height: 500px;
  width: 100%;
}

/* Thông báo flash (ví dụ như khi import dữ liệu thành công) */
.flash-messages {
  list-style: none;
  padding: 0;
  margin: 1em 0;
}

.flash {
  background-color: #dff0d8; /* màu xanh nhạt cho thành công */
  color: #3c763d;
  padding: 0.5em;
  border-radius: 4px;
  margin-bottom: 0.5em;
}

/* khoảng cách cho form xuất/nhập dữ liệu trên trang upload */
.export-form,
.import-form {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

/* Phần nội dung truyện trong trang chi tiết */
.story-part {
  /* tạo khoảng cách với phần danh sách chương ở phía trên; tăng gấp đôi khoảng cách so với trước */
  margin-top: 3em;
  margin-bottom: 1.5em;
}

/* Điều hướng chương và danh sách chương trong trang chi tiết */
.part-navigation {
  text-align: center;
  /* đẩy điều hướng xuống một chút để cách xa nội dung phía trên */
  margin-top: 1.5em;
  margin-bottom: 1em;
}
.part-navigation a {
  margin: 0 1em;
  text-decoration: none;
  color: #007bff;
  font-weight: bold;
}
.part-navigation a:hover {
  text-decoration: underline;
}
.part-navigation .no-link {
  color: #555;
  margin: 0 1em;
}

/* danh sách chương: bỏ dấu chấm và khoảng cách giữa các mục */
.part-list ul {
  list-style: none;
  padding: 0;
}
.part-list li {
  margin-bottom: 0.5em;
}

/* Tiêu đề chương: căn giữa và in đậm */
.chapter-title {
  text-align: center;
  font-weight: bold;
  margin-bottom: 0.5em;
  /* đẩy tiêu đề chương xuống khoảng hai dòng để tạo khoảng cách với điều hướng */
  margin-top: 1em;
}

/* Hiển thị xếp hạng sao */
.rating {
  color: #ffcc00;
  font-size: 1em;
}

/* Khoảng cách cho form đánh giá */
.rating-section {
  margin-top: 1em;
  margin-bottom: 1.5em;
}

.rating-form label {
  margin-right: 0.5em;
}
.rating-form button {
  margin-left: 0.5em;
  padding: 0.3em 0.8em;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.rating-form button:hover {
  background-color: #0056b3;
}

/* Danh sách truyện/phim trùng khi import */
.duplicate-item {
  margin-bottom: 1.5em;
  padding: 0.5em 0;
  border-bottom: 1px solid #ccc;
}
.duplicate-item:last-child {
  border-bottom: none;
}
.duplicate-item p {
  margin: 0.25em 0;
}
.duplicate-item .snippet-db {
  color: #28a745; /* xanh lá cây */
  margin-left: 1em;
}
.duplicate-item .snippet-json {
  color: #d9534f; /* đỏ */
  margin-left: 1em;
}
.duplicate-item .decision {
  margin-left: 1em;
  margin-top: 0.3em;
}

/* trạng thái hoàn thành/chưa hoàn thành */
.status-message {
  font-style: normal;
  margin: 0.3em 0 0.5em 0;
  font-size: 0.9em;
}
/* toàn bộ dòng trạng thái hoàn thành sẽ đổi màu tùy theo lớp */
.completed-status {
  color: #2e7d32;
}
.updating-status {
  color: #c62828;
}
.status-message em.completed {
  color: #2e7d32;
  font-style: italic;
}
.status-message em.updating {
  color: #c62828;
  font-style: italic;
}

/* đoạn trích nội dung nghiêng */
.snippet {
  font-style: italic;
}

/* Form tìm kiếm ở trang upload dành cho danh sách truyện đã có */
.search-existing-form {
  margin: 0.5em 0;
  display: flex;
  align-items: center;
}
.search-existing-form input[type="text"] {
  padding: 0.25em 0.5em;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-right: 0.5em;
  flex: 1;
}
.search-existing-form button {
  padding: 0.3em 0.8em;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.search-existing-form button:hover {
  background-color: #0056b3;
}

/* Phân trang trong trang upload */
.pagination {
  margin: 0.5em 0 1em 0;
}
.pagination a {
  margin: 0 0.3em;
  text-decoration: none;
  color: #0056b3;
}
.pagination a:hover {
  text-decoration: underline;
}
.pagination span {
  margin: 0 0.5em;
  font-weight: bold;
}

/* đoạn trích ở trang upload cho mỗi truyện */
.existing-snippet {
  font-size: 0.85em;
  font-style: italic;
  color: #555;
  margin: 0.3em 0 0.5em 0;
}

/* đảm bảo ô nhập tên và mật khẩu trong form tạo mới thể loại sử dụng toàn bộ chiều rộng */
.create-form input[type="text"],
.create-form input[type="password"] {
  width: 100%;
}

/* highlight từ khoá trong kết quả tìm kiếm nội dung */
.highlight {
  color: #d32f2f;
  font-weight: bold;
}

/* danh sách thể loại và form chỉnh sửa trong trang quản lý thể loại */
.category-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.category-list li {
  margin-bottom: 0.5em;
}
.category-actions {
  display: inline-block;
}
.inline-form {
  display: inline-block;
  margin-left: 0.5em;
}
.inline-form input[type="text"] {
  width: auto;
  padding: 0.2em 0.4em;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.inline-form input[type="password"] {
  width: 80px;
  padding: 0.2em 0.4em;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-left: 0.2em;
}
.inline-form button {
  margin-left: 0.2em;
  padding: 0.3em 0.6em;
  font-size: 0.85em;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.inline-form button:hover {
  background-color: #0056b3;
}
.inline-form button.danger {
  background-color: #d9534f;
  color: #fff;
}
.inline-form button.danger:hover {
  background-color: #c9302c;
}

/* Giảm chiều rộng sidebar trên trang quản lý thể loại */
.add_category aside.sidebar {
  width: 260px;
}

/* Căn chỉnh hàng thể loại trong trang quản lý thể loại (grid để thẳng cột) */
/*
 * Căn chỉnh hàng thể loại trong trang quản lý thể loại
 * Sử dụng lưới 5 cột: tên hiện tại, tên mới, mật khẩu, nút cập nhật, nút xoá.
 * Hai cột đầu chia đều phần không gian để đảm bảo chúng đủ dài cho tên thể loại.
 * Cột mật khẩu ngắn, nút cập nhật và xoá được đặt ở cuối và căn thẳng hàng.
 */
.category-row {
  display: grid;
  grid-template-columns: 3fr 3fr minmax(80px, 100px) auto auto;
  align-items: center;
  column-gap: 0.8em;
  margin-bottom: 0.5em;
}

/* tên thể loại hiện tại luôn căn lề trái và in đậm */
.category-row .category-name {
  font-weight: bold;
  text-align: left;
  overflow-wrap: anywhere;
}

/* ô nhập tên mới */
.category-row input[type="text"] {
  width: 100%;
  padding: 0.3em 0.5em;
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* ô mật khẩu ngắn hơn; giới hạn chiều rộng tối đa */
.category-row input[type="password"] {
  width: 100%;
  max-width: 100px;
  padding: 0.3em 0.5em;
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* kiểu chung cho các nút trong hàng thể loại */
.category-row button {
  padding: 0.4em 0.8em;
  font-size: 0.85em;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.category-row button:hover {
  background-color: #0056b3;
}
.category-row button.danger {
  background-color: #d9534f;
}
.category-row button.danger:hover {
  background-color: #c9302c;
}

/* tạo khoảng cách giữa ô mật khẩu và nút cập nhật */
.category-row .update-btn {
  margin-left: 0.6em;
}

/* select trong form tìm kiếm truyện trên trang upload */
.search-existing-form select {
  padding: 0.25em 0.5em;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-right: 0.5em;
}

/* kiểu hiển thị cho các phần trên trang chủ */
.section {
  background-color: #f7f7f7;
  padding: 1em;
  border-radius: 6px;
  margin-bottom: 1.5em;
}

/* bỏ margin-bottom của phần cuối cùng để đáy của cột nội dung ngang bằng sidebar */
.section:last-of-type {
  margin-bottom: 0;
}
.section.best {
  background-color: #f0f6ff;
}
.section.trending {
  background-color: #eef4ff;
}
.section.short {
  background-color: #ecf2ff;
}
.section.long {
  background-color: #e9efff;
}

/* phần hiển thị danh sách truyện trên các trang thể loại, tác giả, tìm kiếm */
.section.listing {
  background-color: #eef4ff;
  padding: 1em;
  border-radius: 6px;
  /* bỏ margin-bottom để đáy của danh sách bằng với sidebar */
  margin-bottom: 0;
}

/* Trang chi tiết truyện: bọc nội dung trong article với nền nhẹ và bo góc */
article {
  background-color: #eef4ff;
  padding: 1em;
  border-radius: 6px;
}

/* không có liên kết (nhãn) trong điều hướng chương */
.no-link {
  color: #666;
  font-weight: bold;
  margin-left: 0.5em;
}

.story-part h3 {
  margin: 0 0 0.5em 0;
}

.error {
  color: #c00;
  font-weight: bold;
}

footer {
  margin-top: 2em;
  padding-top: 1em;
  border-top: 1px solid #ddd;
  text-align: center;
  font-size: 0.8em;
  color: #666;
}

/* Comment notification section styling */
.comment-notification {
  margin-bottom: 2em;
}
.comment-notification ul {
  list-style: none;
  padding: 0;
}
.comment-notification li {
  margin-bottom: 0.5em;
}
.comment-notification .button-row {
  display: flex;
  justify-content: center;
  gap: 2em;
  margin-top: 0.5em;
  margin-bottom: 1em;
}
.comment-notification .button-row button {
  padding: 0.4em 0.8em;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.comment-notification .button-row button:hover {
  background-color: #0056b3;
}
/* Comment list page spacing */
.comment-list {
  list-style: none;
  padding: 0;
}
.comment-list li {
  margin-bottom: 0.5em;
}

/*
 * Đảm bảo rằng trên trang xem nội dung truyện, cột thể loại (sidebar)
 * có chiều ngang đủ rộng giống trang phim. Sử dụng !important để tránh
 * bị ghi đè bởi các quy tắc khác.
 */


/* ---------- Customizations to address sidebar width issues ---------- */
/* On story detail pages, fix the width of the sidebar so it remains consistent across stories
   and parts. Without an explicit flex-basis, the sidebar can shrink when the main content
   overflows, leading to inconsistent widths on different stories. By setting both a fixed
   width and a matching flex-basis, the sidebar stays the same size regardless of content. */
/* On the upload page, widen the sidebar by 20% compared to the default width (800px → 960px).
   The flex-basis is set to the same value to prevent flexbox from shrinking the sidebar when
   the content area is wide. Additionally, the container on the upload page is expanded to
   accommodate the wider sidebar so the main content still has reasonable space. */

/* ---------- Fixed sidebar widths as requested ---------- */
/* On story detail pages (trang xem nội dung), set the sidebar to 40% of its original width.
   Use percentages for both width and flex-basis to ensure the sidebar maintains a consistent
   proportion relative to the container and does not shrink when the content changes. */
body.story_detail aside.sidebar {
  width: 320px;
  flex: 0 0 320px;
  box-sizing: border-box;
}

/* On the upload page (trang upload), set the sidebar to 35% of its original width. This keeps
   the column narrower while still giving room for category names. */
body.upload aside.sidebar {
  width: 280px;
  flex: 0 0 280px;
  box-sizing: border-box;
}

/* Styling for continuation and thank-you messages on the story detail page */
.continuation {
  margin-top: 1em;
  color: #c00; /* đỏ đậm */
  font-weight: bold;
  text-align: left;
}

.thank-you {
  margin-top: 1em;
  color: #006400; /* xanh lá cây đậm */
  font-weight: bold;
  text-align: center;
}