/* ============================================================
   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;
}

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

/* ============================================================
   "Đã lưu" NẰM TRONG trang Tài khoản — #saved-content.sv-trong-tab
   (tab /tai-khoan/da-luu, js/account.js). Trước 27/09/2026 khối này là lớp phủ toàn
   màn hình riêng ở /da-luu; nay là một khung tab thường trong .ac-panel: thôi phủ, thôi
   nền trắng riêng, thôi cuộn riêng — trang cuộn chung như mọi trang.
   ============================================================ */
#saved-content.sv-trong-tab {
  position: static;
  inset: auto;
  z-index: auto;
  overflow: visible;
  background: transparent;
  padding: 0;
}

#saved-content.sv-trong-tab .sv-wrap {
  max-width: none;
  padding: 0;
}

/* Tiêu đề "Đã lưu" và nút ‹ đã do trang Tài khoản lo (tiêu đề + dải tab). Còn lại nút
   "+ Tạo bộ sưu tập", dạt phải. Header chế độ Quản lý (sv-head--manage) giữ nguyên. */
#saved-content.sv-trong-tab .sv-head:not(.sv-head--manage) {
  position: static;
  justify-content: flex-end;
  padding: 0 0 4px;
  background: transparent;
}

#saved-content.sv-trong-tab .sv-head:not(.sv-head--manage) #sv-back-btn,
#saved-content.sv-trong-tab .sv-head:not(.sv-head--manage) .sv-title {
  display: none;
}

#saved-content.sv-trong-tab .sv-head--manage {
  position: static;
  background: transparent;
}

/* Header thường của khối (nút ‹ + tiêu đề) không dùng trong tab — nút "+" đã về cuối hàng chip. */
#saved-content.sv-trong-tab .sv-head:not(.sv-head--manage) {
  display: none;
}

#saved-content .sv-chips .sv-chip-them {
  flex: 0 0 40px;
  align-self: center;
}

/* Thanh "Bỏ lưu · Thêm vào bộ sưu tập · Xong" khi Quản lý trong TAB: phải nổi TRÊN chân trang
   và hai nút nổi Zalo / Gọi (z-index 99999, css/style.css). Hồi còn là lớp phủ, cả khối đã
   ở z-index 100000 nên không lộ; nằm trong trang thường thì chân trang (đứng sau trong DOM)
   đè lên — chủ trang báo "thiếu bỏ lưu / xong" (27/09/2026). */
#saved-content.sv-trong-tab .sv-actionbar {
  z-index: 100000;
  box-shadow: 0 -10px 24px -18px rgba(60, 30, 50, .45);
}

.sv-actionbtn--xong {
  flex: 0 0 auto;
  padding-left: 22px;
  padding-right: 22px;
  background: linear-gradient(140deg, #fff1a3 0%, #f6c95f 48%, #e3aa41 100%);
  border-color: #d8a34c;
  color: #4a2140;
  font-weight: 700;
}

/* Chip lọc (Tất cả · Bộ sưu tập · Loạt chương trình · Reels · Bài viết) — CÙNG TÔNG nút "Làm
   ngay" của tab Nhiệm vụ (css/account.css · .ac-lam): nền kem, viền vàng, chữ mực tím đậm
   (chủ trang chốt 27/09/2026). Chip đang chọn = đúng nút đó (viền vàng đậm) + nền kem đậm hơn. */
#saved-content .sv-chip {
  border: 1.5px solid rgba(216, 163, 76, .5);
  background: #fffaf0;
  color: #4a2140;
  font-weight: 700;
  box-shadow: none;
}

#saved-content .sv-chip.is-on {
  border-color: #d8a34c;
  background: #fdefd0;
  color: #4a2140;
  font-weight: 700;
}

/* Nút "+" và nút X của chế độ Quản lý: kiểu chip thường. */
#saved-content .sv-iconbtn {
  border: 1.5px solid rgba(216, 163, 76, .5);
  background: #fffaf0;
  color: #4a2140;
}