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;
}

/*
 * Trên trang chi tiết phim (endpoint story_detail) chiều ngang của cột thể loại được thu
 * gọn lại chỉ còn khoảng 30% của phần nội dung để tổng thể hài hòa hơn. Sử dụng flex
 * cho giá trị cố định và width để đảm bảo sidebar không bị co giãn khi nội dung
 * chính thay đổi. Thuộc tính box-sizing đảm bảo padding và border được tính
 * trong width.
 */


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;
}

/* ---------- Fixed sidebar widths as requested (film site) ---------- */
/* On movie detail pages (endpoint story_detail), set the sidebar to 40% of the container width. */
body.story_detail aside.sidebar {
  width: 320px;
  flex: 0 0 320px;
  box-sizing: border-box;
}

/* On the upload page for the movie site, set the sidebar to 35% of the container width. */
body.upload aside.sidebar {
  width: 280px;
  flex: 0 0 280px;
  box-sizing: border-box;
}

/* Styling for continuation and thank-you messages on the movie 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;
}