/* ============================================================
   Trang "Đã lưu" — #saved-content
   Màn hình phủ toàn khung, mở từ mục "Đã lưu" trong menu tài khoản.
   Bố cục theo trang "Đã lưu" của Facebook. Nạp SAU css/style.css;
   mọi thứ scope trong #saved-content.
   ============================================================ */

#saved-content {
  position: fixed;
  inset: 0;
  z-index: 100000;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: #fff;
  color: var(--text-normal);
  font-family: 'Be Vietnam Pro', system-ui, sans-serif;
  padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px);
}

/* <button> KHÔNG thừa hưởng font của cha — trình duyệt gán cho nó font hệ thống. Cả trang
   này gần như toàn là <button> (chip lọc, "Quản lý", ô ảnh, nút dưới đáy), thiếu dòng này
   thì chữ trên chúng lạc phông so với phần còn lại của site. */
#saved-content button {
  font-family: inherit;
}

.sv-wrap {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 12px 2rem;
}

/* ---------- Header 3 phần: back · tiêu đề giữa · thêm ---------- */
.sv-head {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  background: #fff;
}

/* Là <h1> nên đã thừa hưởng 'Cormorant Garamond' + màu tiêu đề từ css/style.css.
   Ở đây chỉ đặt cỡ và cân giữa — KHÔNG khai lại font-family, để một chỗ duy nhất
   (style.css) giữ quyền quyết định phông tiêu đề của cả site. */
.sv-title {
  flex: 1;
  margin: 0;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-header);
}

.sv-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border: none;
  border-radius: 50%;
  background: #f0ebee;
  color: var(--text-normal);
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.2s ease;
}

.sv-iconbtn:hover {
  background: #e4dae0;
}

/* ---------- Hàng chip lọc (cuộn ngang) ---------- */
.sv-chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 6px 0 10px;
  scrollbar-width: none;
}

.sv-chips::-webkit-scrollbar {
  display: none;
}

.sv-chip {
  flex: 0 0 auto;
  padding: 8px 16px;
  border: 1px solid #e0d5db;
  border-radius: 999px;
  background: #fff;
  color: var(--text-normal);
  font-size: 0.95rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.sv-chip.is-on {
  background: rgba(144, 30, 62, 0.07);
  border-color: var(--text-header);
  color: var(--text-header);
  font-weight: 600;
}

/* ---------- Mục (Bộ sưu tập / Thước phim và bài viết) ---------- */
.sv-section {
  margin-top: 18px;
}

.sv-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
}

/* <h2>: cũng thừa hưởng Cormorant Garamond từ style.css. */
.sv-section__head h2 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-header);
}

.sv-link {
  border: none;
  background: none;
  padding: 0;
  color: var(--text-header);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
}

.sv-link:hover {
  text-decoration: underline;
}

.sv-muted {
  margin: 0;
  padding: 6px 2px 2px;
  color: var(--text-normal-muted);
  font-size: 0.9rem;
}

/* ---------- Hàng bộ sưu tập (cuộn ngang) ---------- */
.sv-collections {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scrollbar-width: none;
}

.sv-collections::-webkit-scrollbar {
  display: none;
}

.sv-collection {
  flex: 0 0 auto;
  width: 96px;
  border: none;
  background: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
}

.sv-collection__thumb {
  width: 96px;
  height: 96px;
  border-radius: 14px;
  background: #f0ebee;
  object-fit: cover;
  display: block;
}

.sv-collection__name {
  margin: 6px 0 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-normal);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sv-collection__meta {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.78rem;
  color: var(--text-normal-muted);
}

/* ---------- Trạng thái ---------- */
.sv-state {
  margin: 2rem 0;
  text-align: center;
  color: var(--text-normal-muted);
  font-size: 0.95rem;
}

/* ---------- Lưới ảnh ---------- */
.sv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}

.sv-tile {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #ebe4e8;
  border: none;
  padding: 0;
  cursor: pointer;
}

.sv-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.25s ease;
}

.sv-tile:hover img {
  transform: scale(1.04);
}

/* Ô bài chỉ có chữ */
.sv-tile--text {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: linear-gradient(135deg, #fff6e2 0%, #f6dc9c 100%);
}

/* Bắt theo LỚP chứ không theo tên thẻ `span`.
   Ô chọn của chế độ Quản lý cũng là một <span> nằm trong ô này, nên `.sv-tile--text span`
   (0,1,1) sẽ đè `.sv-tile__check` (0,1,0) và bật dấu tích hiện thường trực trên các ô
   chỉ có chữ, kể cả khi không quản lý. */
.sv-tile--text .sv-tile__cap {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--text-normal);
  font-size: 0.82rem;
  line-height: 1.35;
  text-align: center;
}

/* Bài nhiều ảnh: dấu chồng ảnh ở góc */
.sv-tile__multi {
  position: absolute;
  top: 6px;
  right: 6px;
  color: #fff;
  font-size: 0.9rem;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
  pointer-events: none;
}

/* ============================================================
   Chế độ Quản lý — #saved-content.is-managing
   Bấm "Quản lý" ở mục "Thước phim và bài viết". Màn hình rút lại còn
   header + lưới ảnh có ô chọn + thanh hành động dưới đáy.
   ============================================================ */

/* PHẢI có, và phải là !important.
   Hai header và thanh hành động ẩn/hiện bằng thuộc tính `hidden`, nhưng chúng cũng mang
   `display: flex` từ .sv-head / .sv-actionbar. Quy tắc `[hidden] { display: none }` chỉ
   nằm trong UA stylesheet, mà mọi khai báo của tác giả đều thắng UA — nên nếu không có
   dòng này thì gán hidden = true chẳng ẩn được gì, cả hai header cùng hiện một lúc. */
#saved-content [hidden] {
  display: none !important;
}

/* Chip lọc, mục Bộ sưu tập và dòng tiêu đề "Thước phim và bài viết" đều biến mất:
   trong chế độ này chỉ còn đúng một việc là chọn bài. */
#saved-content.is-managing .sv-chips,
#saved-content.is-managing #sv-collections-section,
#saved-content.is-managing .sv-section__head {
  display: none;
}

#saved-content.is-managing .sv-section {
  margin-top: 0;
}

/* Chừa chỗ cho thanh hành động, nếu không nó che mất hàng ảnh cuối. */
#saved-content.is-managing .sv-wrap {
  padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
}

.sv-head--manage {
  justify-content: space-between;
}

/* Mặc định flex item có min-width: auto, nên .sv-title không co xuống dưới bề rộng chữ
   "Tất cả bài viết" — trên màn hẹp, tổng ba phần vượt khổ và nút "Chọn tất cả" bị đẩy
   lòi ra ngoài lề phải, mất chữ. Cho tiêu đề co lại và cắt bằng dấu … thay vì đẩy nút. */
.sv-head--manage .sv-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sv-selectall {
  flex: 0 0 auto;
  font-size: 1.05rem;
  font-weight: 600;
  white-space: nowrap;
}

/* ---------- Ô chọn trên mỗi ảnh ---------- */
/* Chỉ hiện khi đang quản lý: thẻ bài dùng chung một hàm dựng cho cả hai chế độ
   (savedTile() trong js/feed.js), nên ô chọn luôn có trong DOM. */
.sv-tile__check {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: rgba(0, 0, 0, 0.18);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  display: none;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.78rem;
  pointer-events: none;
}

#saved-content.is-managing .sv-tile__check {
  display: flex;
}

/* Ô chọn chiếm đúng góc phải trên, nên giấu dấu chồng ảnh cho khỏi đè lên nhau. */
#saved-content.is-managing .sv-tile__multi {
  display: none;
}

/* Chưa chọn thì chỉ là VÒNG TRÒN RỖNG — dấu tích nằm sẵn trong DOM nhưng ẩn đi.
   Đặc hiệu (0,1,1), thắng `.fas { display: inline-block }` (0,1,0) của Font Awesome. */
.sv-tile__check i {
  display: none;
}

.sv-tile.is-picked .sv-tile__check {
  background: var(--text-header);
  border-color: #fff;
}

.sv-tile.is-picked .sv-tile__check i {
  display: block;
}

/* Ảnh mờ đi để thấy rõ ô nào đang được chọn — chỉ dấu tích thì trên ảnh sáng rất khó nhận ra. */
.sv-tile.is-picked img {
  opacity: 0.6;
}

/* Chế độ quản lý là chọn bài, không phải xem bài: bỏ hiệu ứng phóng to khi rê chuột
   để không gợi ý nhầm là bấm vào sẽ mở bài. */
#saved-content.is-managing .sv-tile:hover img {
  transform: none;
}

/* ---------- Thanh hành động dưới đáy ---------- */
.sv-actionbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  display: flex;
  gap: 10px;
  padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px));
  background: #fff;
  border-top: 1px solid #ede4e8;
}

.sv-actionbtn {
  flex: 1 1 0;
  min-width: 0;
  padding: 12px 8px;
  border: none;
  border-radius: 10px;
  background: #f5eff2;
  color: var(--text-normal);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}

.sv-actionbtn:hover:not(:disabled) {
  background: #ebe0e6;
}

/* Chưa chọn bài nào thì hai nút mờ đi và bấm không ăn. */
.sv-actionbtn:disabled {
  color: var(--text-normal-muted);
  opacity: 0.55;
  cursor: default;
}