/* [24/10] CHUẨN BỊ ĐĂNG (popup mã cột "Có fanpage") — mỗi biến thể một bài Facebook giả lập (thẻ bài của khung điện thoại, màu app Facebook tối)
   + bình luận của page + nút Duyệt đăng. Lưới tự gói theo bề rộng (cấm cuộn ngang). Tiền tố cbd- (chuẩn bị đăng). Hover chỉ brightness. */
.cbd { display: grid; gap: 16px; }
.cbd-luoi { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; align-items: start; }
.cbd-the { --fb-nen: #18191a; --fb-the: #242526; --fb-o: #3a3b3c; --fb-ke: #393a3b; --fb-chu: #e4e6eb; --fb-chu-2: #b0b3b8; --fb-xanh: #0866ff; --dtp-lech: #ff8a5c;
  position: relative; display: grid; gap: 0; min-width: 0; border-radius: 14px; overflow: hidden; background: var(--fb-the);
  color: var(--fb-chu); font: 13px/1.38 -apple-system, "SF Pro Text", "Segoe UI", Inter, sans-serif; box-shadow: 0 0 0 1px rgb(255 122 80 / .18); }
.cbd-the.bi-chan { opacity: .62; }
.cbd-nhan { padding: 8px 12px 0; font-family: var(--wow-font-chu); color: var(--fb-chu-2); }
/* [25/10] dấu trạng thái bài ở đầu thẻ (✓ đã đăng · ⌛ trong hàng · ⏸ cổng đăng tắt) */
.cbd-dau { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-right: 12px; }
.cbd-dau > .cbd-nhan { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cbd-dau > .tt-ic { flex: none; margin-top: 8px; }
.cbd-the .dtp-bai-video { aspect-ratio: 9 / 16; width: 100%; }
.cbd-link { display: inline-block; padding: 0 6px; border-radius: 6px; background: rgb(8 102 255 / .18); color: #4599ff; font-weight: 600; white-space: nowrap; }
.cbd-bl { display: grid; gap: 8px; padding: 10px 12px 4px; border-top: 1px solid var(--fb-ke); }
.cbd-bl-dong { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 8px; align-items: start; }
.cbd-bl-dong .dtp-av-nho { width: 32px; height: 32px; }
.cbd-bl-than { display: grid; gap: 4px; min-width: 0; }
.cbd-bl-bong { justify-self: start; max-width: 100%; padding: 7px 11px; border-radius: 16px; background: var(--fb-o); overflow-wrap: anywhere; }
.cbd-bl-bong b { display: block; font-size: .92em; }
.cbd-bl-anh { width: min(160px, 100%); aspect-ratio: 1; border-radius: 12px; background: #3a3b3c center/cover no-repeat; }
.cbd-chan { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px 12px; font-family: var(--wow-font-chu); }
.cbd-cay > summary { cursor: pointer; color: var(--wow-chu-3); font-family: var(--wow-font-chu); margin-bottom: 10px; }
.cbd-cay > summary:hover { filter: brightness(1.25); }
.cbd-link.that { white-space: normal; overflow-wrap: anywhere; user-select: all; font-weight: 500; }
/* [24/10] caption mọi thẻ cao đúng 3 dòng ⇒ video các thẻ thẳng hàng (CEO "lệch lạc"); mở "Xem thêm" thì chỉ thẻ đó dài ra */
.cbd-the .dtp-bai-chu { min-height: calc(1.38em * 3); }
.cbd-the .dtp-bai-chu.gon { -webkit-line-clamp: 3; height: calc(1.38em * 3); }
.cbd-the .dtp-xem-them { margin: -4px 12px 6px; line-height: 1.38; }
.cbd-the .dtp-bai-video video { background: #000; }

/* [28/10 01h] THẺ DUYỆT gọn (CEO "đập đi xây lại UI popup này cho gọn"): video Mới | Gốc cạnh nhau · caption · một dòng cách làm · bình luận gập · nút
   Duyệt đăng cả bề ngang. Màu theo khuôn WOW (bỏ màu app Facebook của thẻ giả lập cũ; biến --fb-* giữ cho gói bình luận). Lưới tự gói, cấm cuộn ngang. */
.cbd-luoi { grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr)); }
.cbd-the { gap: 8px; padding: 10px 12px 12px; background: var(--wow-mat-2); color: var(--wow-chu); font: 13px/1.45 var(--wow-font-chu); box-shadow: 0 0 0 1px var(--wow-vien); }
.cbd-dau { padding: 0; }
.cbd-nhan { padding: 0; }
.cbd-dau > .tt-ic { margin-top: 0; }
.cbd-vds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cbd-vd { margin: 0; display: grid; gap: 4px; min-width: 0; align-content: start; }
.cbd-vd figcaption { display: flex; gap: 8px; align-items: baseline; min-width: 0; font-size: 12px; color: var(--wow-chu-3); }
.cbd-vd figcaption b { color: var(--wow-chu-2); font-weight: 600; }
.cbd-vd figcaption a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cbd-vd video { width: 100%; aspect-ratio: 9 / 16; background: #000; border-radius: 8px; object-fit: contain; }
.cbd-vd-thieu > span, div.cbd-vd-thieu { display: grid; place-items: center; aspect-ratio: 9 / 16; border: 1px dashed var(--wow-vien); border-radius: 8px; color: var(--wow-chu-3); font-size: 12px; text-align: center; padding: 8px; }
.cbd-cap { margin: 0; overflow-wrap: anywhere; }
.cbd-meta { margin: 0; font-size: 11.5px; color: var(--wow-chu-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cbd-meta b { margin-right: 6px; color: var(--wow-chu-2); font-weight: 500; }
.cbd-bl-gap > summary { cursor: pointer; font-size: 12px; color: var(--wow-chu-3); }
.cbd-bl-gap > summary:hover { filter: brightness(1.25); }
.cbd-bl-gap .cbd-bl { padding: 8px 0 0; border-top: 0; color: var(--fb-chu); }
.cbd-chan { padding: 0; }
.cbd-chan .wow-nut-chinh { width: 100%; min-height: 40px; }
.cbd-sp { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; margin-bottom: 4px; }
.cbd-sp b { font-family: var(--wow-font-so); color: var(--wow-chu); }
.cbd-chi-phi { margin-left: auto; font-size: 12px; color: var(--wow-chu-3); white-space: nowrap; }
.cbd-chi-phi b { font-family: var(--wow-font-so); color: var(--wow-chu); }
.cbd-dau > .cbd-chi-phi + .tt-ic { margin-left: 8px; }
/* [02/11] mã nóng giao nhiều profile: biến thể lên page của profile KHÁC page đầu popup — chỉ hiện khi lệch, cắt "…" (tên đủ ở ô gợi ý) */
.cbd-page-khac { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 8px; font-size: 12px; color: var(--dtp-lech, #ff8a5c); }
.cbd-bdd-ten .cbd-page-khac { margin: 0 0 0 6px; }

/* [01/11] popup mã chia theo việc: Bài đã đăng (bảng số) · Chờ duyệt · Đang chờ đăng · Không đăng (gập) */
.cbd-nhom { display: grid; gap: 10px; min-width: 0; }
.cbd-nhom-ten { margin: 0; display: flex; align-items: baseline; gap: 8px; font-family: var(--wow-font-chu); font-size: 14px; font-weight: 500; color: var(--wow-chu); }
.cbd-nhom-ten b { font-family: var(--wow-font-so); font-weight: 400; color: var(--wow-chu-3); }
.cbd-gap > summary { cursor: pointer; list-style: none; }
.cbd-gap > summary::-webkit-details-marker { display: none; }
.cbd-gap > summary::before { content: "▸"; color: var(--wow-chu-3); }
.cbd-gap[open] > summary::before { content: "▾"; }
.cbd-bdd { display: grid; gap: 4px; min-width: 0; }
.cbd-bdd-tom { margin: 0 0 4px; display: flex; flex-wrap: wrap; gap: 14px; align-items: baseline; font-family: var(--wow-font-chu); font-size: 13px; color: var(--wow-chu-3); }
.cbd-bdd-tom b { font-family: var(--wow-font-so); font-weight: 400; font-size: 20px; color: var(--wow-chu); margin-right: 4px; }
.cbd-bdd-nhat { color: var(--wow-tot); }
.cbd-bdd-dong { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto 90px 22px auto; gap: 12px; align-items: center; padding: 6px 8px; border-radius: 8px; background: var(--wow-mat-2); font-family: var(--wow-font-chu); font-size: 13px; }
.cbd-bdd-dong video, .cbd-bdd-vd-thieu { width: 40px; height: 56px; object-fit: cover; border-radius: 4px; background: #000; display: block; }
.cbd-bdd-ten { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--wow-chu); }
.cbd-bdd-gio { color: var(--wow-chu-3); font-family: var(--wow-font-so); font-size: 12px; }
.cbd-bdd-so b { font-family: var(--wow-font-so); font-weight: 400; font-size: 15px; color: var(--wow-chu); }
.cbd-bdd-so { color: var(--wow-chu-3); text-align: right; }
@media (max-width: 520px) { .cbd-bdd-dong { grid-template-columns: 40px minmax(0, 1fr) auto auto; } .cbd-bdd-gio, .cbd-bdd-dong > :nth-child(5) { display: none; } }
