/* Popup "Bài viết mới" ở trang Tin tức. Xem js/create-post.js.
   Phần feed vẫn dùng CSS sẵn có trong style.css (.middle .feeds .feed...), file này chỉ
   lo riêng popup. */

/* Popup chiếm trọn chiều cao màn hình như luồng gốc.
   .modal-dialog-centered của Bootstrap đặt sẵn min-height: calc(100% - margin*2) để canh
   giữa; muốn cao 100% thì phải khử cả margin lẫn min-height đó, chỉ đặt height là không
   đủ (vẫn còn chừa 1rem trên dưới).
   100dvh chứ không phải 100vh: trên trình duyệt di động, 100vh tính cả phần thanh địa chỉ
   sẽ ẩn đi, nên đáy popup (nút "Tiếp") bị đẩy xuống dưới mép màn hình. */
.cp-dialog {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100dvh;
  height: 100dvh;
}
.cp-content {
  height: 100%;
  border-radius: 0;
  border: 0;
  overflow: hidden;
  /* Cột dọc: header + footer giữ nguyên chiều cao, thân co giãn lấp phần còn lại. */
  display: flex;
  flex-direction: column;
}

.cp-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid #eee;
}
.cp-title { flex: 1; text-align: center; font-weight: 700; font-size: 16px; }
.cp-icon-btn {
  border: 0;
  background: transparent;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #444;
  cursor: pointer;
}
.cp-icon-btn:hover { background: #f2f2f2; }

/* KHÔNG đặt padding ở đây. Bước 1 và 2 là màn hình đen tràn viền, trước đây phải khử
   padding bằng margin âm 16px trên từng pane — mà pane tràn ra ngoài vùng cuộn thì mỗi
   trình duyệt cắt một kiểu, khung ảnh không chạm được mép phải. Pane nào cần lề thì tự
   đặt lấy (xem pane 3).
   min-height:0 là bắt buộc với con của flex: mặc định min-height:auto khiến nó không co
   nhỏ hơn nội dung, thân popup phình quá khung và đẩy .cp-footer ra khỏi màn hình. */
.cp-body { padding: 0; flex: 1 1 auto; min-height: 0; overflow-y: auto; }

/* Bước 3 KHÔNG đặt padding chung: các dải ngăn cách (.cp-sep) và vệt nền khi bấm từng
   dòng phải chạy hết bề ngang popup, có padding ở đây thì chúng bị thụt vào hai bên.
   Từng khối bên trong tự lo lề của nó. */
.cp-pane[data-pane="3"] { padding: 0 0 8px; }

/* --- Bước 1: chọn ảnh (tông tối như luồng gốc) --- */

/* Header và footer đổi màu theo bước đang mở. Bước 1 là màn chọn ảnh nền đen, để header
   trắng thì nhìn như hai mảnh ghép rời nhau. */
.cp-content.is-dark { background: #000; }
.cp-content.is-dark .cp-header,
.cp-content.is-dark .cp-footer { border-color: #262626; }
.cp-content.is-dark .cp-title { color: #fff; }
.cp-content.is-dark .cp-icon-btn { color: #fff; }
.cp-content.is-dark .cp-icon-btn:hover { background: #1f1f1f; }

/* Bước 2 tràn màn hình: header chỉ còn hai nút trên nền đen liền mạch với ảnh, và thanh
   nút trắng dưới cùng biến mất vì nút "Tiếp" đã được chuyển xuống hàng dải ảnh. */
.cp-content.is-edit .cp-header { border-bottom: 0; }
/* visibility chứ KHÔNG phải display:none. Chính .cp-title mang flex:1, nó là thanh đệm
   đẩy nút X sang mép phải; bỏ hẳn khỏi luồng thì nút quay lại và X dồn về góc trái. */
.cp-content.is-edit .cp-title { visibility: hidden; }
.cp-content.is-edit .cp-footer { display: none; }

/* Bước 1 tự quản nền tối của riêng nó, không đổi màu cả modal, vì các bước sau vẫn dùng
   nền sáng cho phần nhập liệu. */
.cp-pane[data-pane="1"] {
  background: #000;
  color: #fff;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

/* Khung ảnh giữ nguyên tỷ lệ, phần còn lại nhường cho lưới ảnh cuộn bên dưới — cuộn lưới
   thì khung ảnh đứng yên, giống luồng gốc. */
.cp-pane[data-pane="1"] .cp-grid {
  flex: 1 1 auto;
  overflow-y: auto;
  align-content: start;
}

/* Khung ảnh lớn: vuông, rộng bằng đúng bề ngang popup.
   Bề ngang phải là width:100% và chiều cao phải suy ra TỪ bề ngang — không được làm ngược
   lại. Trước đây khung có aspect-ratio 1/1 kèm max-height:46vh mà không ghi width: khi
   max-height cắt chiều cao, Safari lấy chiều cao đã cắt suy ngược ra bề ngang (thành
   46vh × 1) thay vì kéo giãn theo khung cha, rồi vì là flex item không giãn trong cột nên
   nó dạt về mép trái — chừa vệt đen bên phải, đúng lỗi "ảnh bị lệch sang trái".
   Đã bỏ hẳn max-height chứ không chỉ thêm width: còn max-height thì vẫn còn đường để một
   engine nào đó suy ngược bề ngang. Màn hình quá thấp thì .cp-body cuộn được. */
.cp-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  flex: 0 0 auto;
  background: #0d0d0d;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Vùng kéo ảnh. touch-action:none để trình duyệt di động giao trọn cử chỉ cho JS: mặc
   định nó tự cuộn trang / chụm để phóng cả trang, và pointermove ngừng bắn giữa chừng nên
   ảnh kéo được vài pixel rồi đứng. */
.cp-stage-view {
  position: absolute;
  inset: 0;
  overflow: hidden;
  touch-action: none;
  cursor: grab;
}
.cp-stage-view.is-dragging { cursor: grabbing; }

/* Ảnh được JS đặt width/height (mức phủ kín khung nhân zoom) và transform để dời tâm.
   max-width:none để ảnh to hơn khung không bị Bootstrap ép co lại. */
.cp-stage-view img {
  position: absolute;
  left: 50%;
  top: 50%;
  max-width: none;
  transform: translate(-50%, -50%);
  user-select: none;
  -webkit-user-drag: none;
}

/* --- Nút thu phóng / xem toàn ảnh, nổi trên góc dưới khung ảnh --- */

.cp-stage-tools {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  pointer-events: none;   /* chỉ các nút bên trong nhận chuột, phần trống vẫn kéo được ảnh */
}
.cp-stage-tools > * { pointer-events: auto; }

.cp-stage-btn {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: rgba(0, 0, 0, .6);
  font-size: 13px;
  cursor: pointer;
}
.cp-stage-btn:hover { background: rgba(0, 0, 0, .8); }
.cp-stage-btn[aria-pressed="true"],
.cp-stage-btn[aria-expanded="true"] { background: #fff; color: #000; }

.cp-zoom { position: relative; display: flex; justify-content: flex-end; }

.cp-zoom-pop {
  position: absolute;
  right: 0;
  bottom: 42px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .8);
  color: #fff;
}
.cp-zoom-pop input[type='range'] { width: 130px; }
.cp-zoom-ico-sm { font-size: 10px; opacity: .8; }
.cp-zoom-ico-lg { font-size: 15px; opacity: .8; }

/* Thuộc tính hidden phải thắng được display:flex đặt ở trên. Cùng độ ưu tiên (0,1,0) thì
   luật viết sau thắng, nên các dòng này bắt buộc nằm dưới. */
.cp-stage-empty[hidden],
.cp-stage-tools[hidden],
.cp-zoom-pop[hidden] { display: none; }

.cp-stage-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: #6b6b6b;
  font-size: 14px;
}
.cp-stage-empty i { font-size: 30px; }

.cp-galbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px 10px;
}
.cp-galbar-title { font-weight: 700; font-size: 15px; }

.cp-select-btn {
  border: 0;
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 13px;
  color: #fff;
  background: #262626;
  cursor: pointer;
}
.cp-select-btn[aria-pressed="true"] { background: #1877f2; }

.cp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  padding: 0 2px 2px;
}

.cp-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #1a1a1a;
  cursor: pointer;
  overflow: hidden;
}
.cp-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }

.cp-tile-add {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 20px;
  background: #2b2b2b;
}

/* Viền sáng đánh dấu ảnh đang xem ở khung lớn. */
.cp-tile.is-current::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 3px solid #fff;
}

/* Số thứ tự khi bật chế độ chọn nhiều, giống cách app đánh số ảnh đã chọn. */
.cp-tile-badge {
  position: absolute;
  top: 5px;
  right: 5px;
  min-width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #1877f2;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: none;
  align-items: center;
  justify-content: center;
}
.cp-grid.is-multi .cp-tile-badge { display: flex; background: rgba(0, 0, 0, .35); }
.cp-grid.is-multi .cp-tile.is-picked .cp-tile-badge { background: #1877f2; }

.cp-preview { margin-top: 14px; text-align: center; }
.cp-preview img {
  max-width: 100%;
  max-height: 260px;
  border-radius: 12px;
  display: inline-block;
}
/* Ảnh xem trước ở bước 3: đủ lớn để nhận ra mình đang đăng ảnh nào, nhưng vẫn chừa chỗ
   cho danh sách tuỳ chọn bên dưới. */
.cp-preview-sm img { max-height: 300px; }

.cp-hint { color: #999; font-size: 13px; }

/* Không viền, không khung — chú thích viết thẳng lên nền trắng như luồng gốc. */
.cp-caption {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 0 16px;
  border: 0;
  font-size: 16px;
  font-family: inherit;
  resize: none;
  min-height: 84px;
  background: transparent;
}
.cp-caption:focus { outline: none; }
.cp-caption::placeholder { color: #8e8e8e; }

/* --- Danh sách tuỳ chọn ở bước 3 --- */

.cp-softchips { display: flex; gap: 10px; padding: 6px 16px 14px; }
.cp-softchip {
  display: inline-flex; align-items: center; gap: 8px;
  border: 0; border-radius: 10px; padding: 11px 14px;
  background: #f1f1f1; color: #111; font-size: 14px; font-weight: 600; cursor: pointer;
}
.cp-softchip:hover { background: #e7e7e7; }

/* Một dòng tuỳ chọn: icon — nhãn co giãn — giá trị — mũi tên. */
.cp-row {
  display: flex; align-items: center; gap: 14px;
  width: 100%; border: 0; background: transparent;
  padding: 14px 16px; text-align: left; cursor: pointer; color: #111;
}
.cp-row:hover { background: #fafafa; }
.cp-row-static { cursor: default; }
.cp-row-static:hover { background: transparent; }
.cp-row-ico { width: 20px; font-size: 18px; color: #111; text-align: center; flex: 0 0 auto; }
.cp-row-label { flex: 1; min-width: 0; font-size: 16px; }
.cp-row-label small { display: block; margin-top: 2px; font-size: 13px; color: #737373; line-height: 1.35; }
.cp-row-value { font-size: 15px; color: #737373; white-space: nowrap; }
.cp-row-value:empty { display: none; }
.cp-row-arrow { font-size: 14px; color: #8e8e8e; flex: 0 0 auto; }
.cp-row-help { margin: -4px 16px 4px; font-size: 13px; color: #737373; line-height: 1.4; }

/* Dải gợi ý (bài hát / vị trí) cuộn ngang dưới dòng tương ứng. */
.cp-suggest { display: flex; gap: 8px; padding: 0 16px 12px; overflow-x: auto; }
.cp-suggest:empty { display: none; }
.cp-suggest-item {
  display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto;
  max-width: 230px; border: 0; border-radius: 8px; padding: 8px 12px;
  background: #f1f1f1; color: #111; font-size: 14px; cursor: pointer;
}
.cp-suggest-item.is-on { background: #111; color: #fff; }
.cp-suggest-item span {
  min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cp-suggest-art { width: 32px; height: 32px; border-radius: 5px; flex: 0 0 auto; }

.cp-sep { height: 8px; background: #f0f0f0; margin: 6px 0; }

/* Công tắc bật/tắt. */
.cp-switch {
  flex: 0 0 auto; width: 50px; height: 30px; border: 0; border-radius: 999px;
  background: #c7c7c7; position: relative; cursor: pointer; transition: background .2s;
}
.cp-switch::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 24px; height: 24px; border-radius: 50%; background: #fff;
  transition: transform .2s;
}
.cp-switch[aria-checked="true"] { background: #0a84ff; }
.cp-switch[aria-checked="true"]::after { transform: translateX(20px); }

.cp-msg { font-size: 13px; color: #666; margin: 8px 16px 0; min-height: 18px; }
.cp-msg.is-error { color: #c62828; }

.cp-footer { padding: 12px 16px 16px; border-top: 1px solid #eee; }
.cp-next {
  width: 100%;
  border: 0;
  border-radius: 10px;
  padding: 12px;
  font-weight: 700;
  color: #fff;
  background: #4f46e5;
  cursor: pointer;
}
.cp-next:hover { filter: brightness(1.08); }

/* Ô "What's on your mind?" giờ chỉ để bấm mở popup, không gõ trực tiếp. */
.middle .create-post input[type='text'] { cursor: pointer; }

@media (max-width: 480px) {
  .cp-dialog { max-width: 100%; }
}

/* --- Bước 2: chỉnh sửa ảnh --- */

.cp-pane[data-pane="2"] {
  background: #000;
  color: #fff;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

/* Ảnh lấy hết phần còn lại sau thanh công cụ và hàng dải ảnh.
   min-height:0 là bắt buộc: con của flex mặc định min-height:auto, không co nhỏ hơn nội
   dung nên khung ảnh đẩy hai thanh dưới ra khỏi màn hình thay vì tự co lại. */
.cp-edit-stage {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  padding: 6px 0;
}

/* Khung quyết định tỷ lệ hiển thị; ảnh bên trong dùng object-fit:cover để cắt giữa,
   khớp với cách bakeImage() cắt khi nướng ra canvas. */
/* Bề rộng do renderEditStage() đặt bằng min(100%, calc(42vh * tỷ lệ)) — KHÔNG đặt
   width/max-height cố định ở đây, vì max-height sẽ cắt cụt chiều cao mà aspect-ratio suy
   ra và làm mất đúng tỷ lệ vừa chọn (Dọc và Vuông từng ra cùng một hộp vì lý do này). */
.cp-edit-frame {
  position: relative;
  margin: 0 auto;
  aspect-ratio: 1;
  overflow: hidden;
  /* Kéo được ảnh ngay trên khung này (xem attachCropDrag). touch-action:none để trình
     duyệt di động giao trọn cử chỉ cho JS thay vì cuộn trang. */
  touch-action: none;
  cursor: grab;
}
.cp-edit-frame.is-dragging { cursor: grabbing; }
/* Không dùng object-fit:cover nữa: bước 1 cho phép kéo/thu phóng ảnh, nên khung xem
   trước ở đây phải hiện ĐÚNG vùng đã căn đó. layoutCrop() đặt width/height/transform,
   giống hệt cách khung ở bước 1 hiển thị. */
.cp-edit-frame img {
  position: absolute;
  left: 50%;
  top: 50%;
  max-width: none;
  transform: translate(-50%, -50%);
  display: block;
  /* Chặn kéo-thả ảnh sẵn có của trình duyệt, nếu không mỗi lần kéo để căn là nó nhấc ảnh
     lên thành thao tác kéo-thả và cử chỉ đứt giữa chừng. */
  user-select: none;
  -webkit-user-drag: none;
}

/* Chữ đè lên ảnh, đặt gần đáy giống vị trí bakeImage() vẽ vào canvas. */
.cp-text-layer {
  position: absolute;
  left: 0; right: 0; bottom: 6%;
  text-align: center;
  font-weight: 700;
  font-size: clamp(16px, 5vw, 28px);
  color: #fff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .7);
  padding: 0 10px;
  pointer-events: none;
}

.cp-panel {
  padding: 10px 12px;
  background: #111;
  border-top: 1px solid #222;
}
.cp-panel label { display: block; font-size: 12px; color: #bbb; margin-bottom: 8px; }
.cp-panel input[type='range'] { width: 100%; }
.cp-panel input[type='text'] {
  width: 100%; padding: 9px 12px; border-radius: 8px;
  border: 1px solid #333; background: #1c1c1c; color: #fff; font-size: 14px;
}
.cp-panel-note { font-size: 13px; color: #b9b9b9; line-height: 1.5; }

.cp-reset {
  margin-top: 8px; border: 0; border-radius: 999px; padding: 6px 14px;
  font-size: 12px; background: #2b2b2b; color: #fff; cursor: pointer;
}

.cp-filters { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.cp-filter { border: 0; background: transparent; color: #ccc; font-size: 11px; cursor: pointer; flex: 0 0 auto; }
.cp-filter-thumb {
  display: block; width: 56px; height: 56px; border-radius: 8px;
  background-size: cover; background-position: center; background-color: #222;
  margin-bottom: 4px; border: 2px solid transparent;
}
.cp-filter.is-on .cp-filter-thumb { border-color: #fff; }
.cp-filter.is-on { color: #fff; font-weight: 700; }

.cp-ratios { display: flex; gap: 8px; }
.cp-ratio {
  border: 1px solid #333; background: #1c1c1c; color: #ddd;
  border-radius: 8px; padding: 7px 14px; font-size: 13px; cursor: pointer;
}
.cp-ratio.is-on { background: #fff; color: #000; border-color: #fff; font-weight: 700; }

/* Sáu nút chia đều một hàng thay vì cuộn ngang — cuộn ngang thì nút cuối bị khuất, người
   dùng không biết là còn nút. Nhãn nào quá dài thì cắt bằng dấu ba chấm. */
.cp-tools {
  display: flex; gap: 6px; flex: 0 0 auto;
  padding: 10px 8px; background: #000; border-top: 1px solid #1c1c1c;
}
.cp-tool {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  border: 0; border-radius: 10px; padding: 8px 6px;
  background: #1c1c1c; color: #fff; font-size: 11px; cursor: pointer;
}
.cp-tool span {
  max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cp-tool i { font-size: 15px; }
.cp-tool.is-on { background: #fff; color: #000; }

/* Hàng dưới cùng của bước 2: dải ảnh bên trái, nút "Tiếp" bên phải. */
.cp-editbar {
  display: flex; align-items: center; gap: 10px;
  flex: 0 0 auto; padding: 8px; background: #000;
}
.cp-next-slot { flex: 0 0 auto; }
/* Nút "Tiếp" khi đứng ở hàng này là viên thuốc nhỏ, không phải nút to hết bề ngang như
   lúc nằm trong .cp-footer. */
.cp-next-slot .cp-next {
  width: auto; border-radius: 999px; padding: 10px 20px; background: #0a84ff;
}

/* padding chuyển lên .cp-editbar, ở đây chỉ còn lo phần cuộn ngang của dải ảnh. */
.cp-filmstrip { display: flex; gap: 6px; background: #000; overflow-x: auto; flex: 1 1 auto; min-width: 0; }
.cp-film {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 8px;
  overflow: hidden; border: 2px solid transparent; cursor: pointer; background: #1c1c1c;
}
.cp-film img { width: 100%; height: 100%; object-fit: cover; }
.cp-film.is-current { border-color: #fff; }
.cp-film-add { display: flex; align-items: center; justify-content: center; border: 1px solid #333; color: #fff; }

/* --- Bảng chọn âm thanh (bước 2) --- */

/* Pill bài đang chọn, nổi trên đầu màn chỉnh sửa. */
.cp-audio-pill {
  display: flex; align-items: center; gap: 8px;
  margin: 8px 10px 0; padding: 6px 8px;
  background: #1c1c1c; border-radius: 999px;
}
.cp-audio-pill-art { width: 30px; height: 30px; border-radius: 7px; flex: 0 0 auto; }
.cp-audio-pill-txt { flex: 1; min-width: 0; line-height: 1.25; }
.cp-audio-pill-txt b {
  display: block; font-size: 13px; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cp-audio-pill-txt small { display: block; font-size: 11px; color: #9a9a9a; }
.cp-audio-pill-x {
  border: 0; background: #2b2b2b; color: #fff;
  width: 26px; height: 26px; border-radius: 50%; cursor: pointer; flex: 0 0 auto;
}

/* Hàng đầu bảng chọn nhạc. Trước đây chỉ có vạch "grip" trang trí, không có nút đóng —
   mở bảng ra rồi mà không muốn chọn bài nào thì bị kẹt, vì nút "Âm thanh" để bấm lại đã bị
   chính bảng che mất. */
.cp-audio-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 8px 6px 16px;
}
.cp-audio-title { font-weight: 700; font-size: 16px; color: #fff; }
.cp-audio-head .cp-icon-btn { color: #fff; }
.cp-audio-head .cp-icon-btn:hover { background: #2b2b2b; }

/* Bảng chọn nhạc trượt lên đè phần chỉnh sửa, giống sheet của app.
   inset:0 giờ tính theo .cp-content (bảng đã chuyển ra ngoài pane 2 để bước 3 dùng chung),
   nên nó phủ trọn popup kể cả header. */
.cp-audio {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  background: #151515;
}
.cp-pane[data-pane="2"] { position: relative; }

.cp-audio-grip {
  width: 38px; height: 4px; border-radius: 999px;
  background: #555; margin: 10px auto 6px; flex: 0 0 auto;
}

.cp-audio-search {
  display: flex; align-items: center; gap: 9px;
  margin: 6px 12px 10px; padding: 10px 13px;
  background: #262626; border-radius: 10px; flex: 0 0 auto;
}
.cp-audio-search i { color: #9a9a9a; font-size: 13px; }
.cp-audio-search input {
  flex: 1; border: 0; background: transparent; color: #fff; font-size: 14px; outline: none;
}
.cp-audio-search input::placeholder { color: #8a8a8a; }

.cp-audio-tabs {
  display: flex; gap: 8px; padding: 0 12px 10px;
  overflow-x: auto; flex: 0 0 auto;
}
.cp-chip {
  flex: 0 0 auto; border: 0; border-radius: 999px;
  padding: 8px 15px; font-size: 13px; font-weight: 600;
  background: #262626; color: #ddd; cursor: pointer;
}
.cp-chip.is-on { background: #fff; color: #000; }

.cp-audio-list { flex: 1; overflow-y: auto; padding: 0 6px 10px; }

.cp-track {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 8px; border-radius: 10px; cursor: pointer;
}
.cp-track:hover { background: #1e1e1e; }
.cp-track.is-on { background: #23314a; }

.cp-track-art {
  width: 46px; height: 46px; border-radius: 8px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255, 255, 255, .85); font-size: 15px;
}
.cp-track-txt { flex: 1; min-width: 0; line-height: 1.35; }
.cp-track-txt b {
  display: block; font-size: 14px; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cp-track-txt small { font-size: 12px; color: #9a9a9a; }

.cp-track-save {
  border: 0; background: transparent; color: #8a8a8a;
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer; flex: 0 0 auto;
}
.cp-track-save.is-on { color: #fff; }

.cp-audio-empty { color: #8a8a8a; font-size: 13px; text-align: center; padding: 28px 0; }

/* --- Bảng chọn tỷ lệ (bước 2) --- */

/* Chỉ che nửa dưới, khác bảng âm thanh che toàn bộ: đang cắt ảnh mà không nhìn thấy ảnh
   thì không biết cắt vào đâu. */
.cp-ratio-sheet {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 3;
  background: #1c1c1c;
  border-radius: 14px 14px 0 0;
}

.cp-ratio-tiles {
  display: flex;
  gap: 14px;
  justify-content: center;
  padding: 18px 14px 14px;
}

.cp-rt {
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* Ô vuông chứa hình mô phỏng khung ảnh. Viền trắng đánh dấu tỷ lệ đang chọn. */
.cp-rt-box {
  width: 74px;
  height: 74px;
  border-radius: 12px;
  background: #3a3a3a;
  border: 2px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cp-rt.is-on .cp-rt-box { border-color: #fff; }

.cp-rt-shape {
  display: block;
  border: 2px solid #d0d0d0;
  border-radius: 4px;
  background: #4a4a4a;
}
.cp-rt.is-on .cp-rt-shape { border-color: #fff; background: #fff; }

.cp-ratio-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 14px;
  border-top: 1px solid #2b2b2b;
}
.cp-ratio-heading { font-weight: 700; font-size: 15px; color: #fff; }
.cp-ratio-cancel,
.cp-ratio-done {
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 15px;
  cursor: pointer;
  padding: 4px 2px;
}
.cp-ratio-done { font-weight: 700; }

/* --- Bình luận và trạng thái tương tác trên thẻ bài (js/feed.js) --- */

/* Nút đang bật (đã thả tim / đã lưu). Mẫu Bootstrap không có sẵn trạng thái này.
   Đổi MÀU thôi thì chưa đủ: icon vẫn là hình rỗng, nhìn lướt qua rất khó biết đã bấm hay
   chưa. Nên TÔ ĐẦY luôn, giống Instagram.

   Cách tô: Font Awesome dùng chung một mã ký tự cho nét mảnh và nét đặc, khác nhau đúng
   ở font-weight 400 và 900 (hai file font riêng, trình duyệt chọn theo cân nặng). Vì vậy
   chỉ cần nâng cân nặng — KHÔNG phải tráo class fa-regular/fa-solid bằng JS, nên
   syncCard() giữ nguyên, chỉ bật/tắt .is-on như cũ. */
.middle .feed .action-buttons span.is-on .fd-icon,
.middle .feed .bookmark span.is-on .fd-icon {
    font-weight: 900;
}

.middle .feed .action-buttons span.is-on i { color: #f0322d; }

/* Lưu bài dùng màu mực của trang (#522546) thay cho tím #6c5ce7 trước đây: tím đó không
   nằm trong bảng màu nào của site, đứng cạnh trái tim đỏ thành ba màu chỏi nhau. */
.middle .feed .bookmark span.is-on i { color: #522546; }

/* Unicons và Font Awesome vẽ trong khung khác nhau, cùng font-size thì FA to hơn rõ —
   để nguyên là hàng bốn icon cao thấp không đều. Ghìm lại cho bằng hai icon Unicons
   bên cạnh. */
.middle .feed .fd-icon {
    font-size: 0.88em;
    /* Font Awesome tự đặt line-height:1 cho icon của nó, còn Unicons để trình duyệt tính
       (1.2). Hai hộp cao khác nhau thì tâm dọc lệch, hàng bốn icon nhìn gợn. Thừa hưởng
       line-height ĐÃ TÍNH của hàng để hai bộ cùng một hộp. */
    line-height: inherit;
}

/* Cùng lý do với .liked-by p: "Xem 9 bình luận" -> "Xem 10 bình luận" mà chữ số rộng
   không đều thì chữ "bình luận" cũng nhích theo. */
.fd-comments { cursor: pointer; font-variant-numeric: tabular-nums; }

/* Ô nhập bình luận trong thẻ bài và danh sách bình luận kèm theo đã gỡ bỏ (20/08/2026):
   bình luận giờ chỉ hiện và gõ ở một chỗ riêng, không phải trong thẻ bài. */

/* Bài được mở từ link chia sẻ /tin-tuc/<postId>: nháy viền vàng cho dễ nhận ra giữa danh
   sách, rồi tự tắt (js/feed.js gỡ lớp sau ~2.6s). */
.middle .feed.is-shared {
  outline: 2px solid #d4a24d;
  outline-offset: 3px;
  transition: outline-color .3s ease;
}

/* Báo ngắn khi đã chép link. position:fixed + z-index cao để không bị thẻ bài che —
   trên cả trang "Đã lưu" (#saved-content z-index 100000). */
.fd-toast {
  position: fixed;
  left: 50%;
  bottom: 84px;
  transform: translateX(-50%);
  z-index: 100001;
  max-width: 90vw;
  padding: 12px 18px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .85);
  color: #fff;
  font-size: 14px;
  text-align: center;
  overflow-wrap: anywhere;
}

/* Bộ đếm ký tự dưới ô chú thích. Xem khoiDongBoDemChuThich() trong js/create-post.js:
   maxlength cắt âm thầm nên phải cho người dùng thấy mình đang ở đâu so với trần. */
.cp-count {
  margin: -0.25rem 0 0.5rem;
  padding: 0 0.15rem;
  color: #8a8a92;
  font-size: 0.78rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Chạm trần: đổi màu để việc bị cắt bớt trở nên nhìn thấy được, không còn im lặng. */
.cp-count.is-full {
  color: #c0392b;
  font-weight: 600;
}