/* [13/10] XƯỞNG CONTENT = MỘT MÀN · CÂY BIẾN THỂ — 数据大屏 trên wow-dai-man-2026-10-12.css.
   Thanh đầu (tên · 3 số · nút) → chip mã → [dòng SP] → cây [GỐC]──×N──▶[biến thể] → [gốc chưa nhân]. Hover chỉ brightness. Đo 1440 + 390. */

/* ── Thanh đầu ── */
.xc-dau { display: grid; gap: 16px; padding: clamp(16px, 2.4vw, 26px); }
.xc-dau-hang { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.xc-dau-so { display: flex; flex-wrap: wrap; gap: 6px 26px; }
.xc-so { display: inline-flex; align-items: baseline; gap: 7px; }
.xc-so b { font-family: var(--wow-font-so); font-size: clamp(24px, 2.4vw, 34px); font-weight: 400; line-height: 1; font-variant-numeric: tabular-nums; }
.xc-so small { font-family: var(--wow-font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--wow-chu-3); }
.xc-dau-nut { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-left: auto; }


/* ── Khu ── */
.xc-khu { display: grid; gap: 14px; }
.xc-khu-dau { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.xc-khu-dau h2 { margin: 0; font-weight: 300; font-size: clamp(16px, 1.6vw, 20px); letter-spacing: 0.06em; } /* [16/10] tiêu đề = tầng 1 viết hoa ba tầng ⇒ hiện đúng chữ nguồn (chỉ hoa chữ đầu), bỏ in hoa CSS */
.xc-ds { display: grid; gap: 12px; }
/* [17/10] cây biến thể nằm TRONG thẻ mã (bước Biến thể của luồng) — gốc nhỏ cỡ thẻ media phía trên, viền nhạt hơn khung mã */
.xc-ds-trong-ma { gap: 10px; }
.xc-ds-trong-ma .xc-cay { grid-template-columns: 120px 60px minmax(0, 1fr); padding: 10px; background: var(--wow-mat-2); }
.xc-ds-trong-ma .xc-noi { height: calc(120px * 5 / 4); }
@media (max-width: 720px) {
  .xc-ds-trong-ma .xc-cay { grid-template-columns: 96px 46px minmax(0, 1fr); }
  .xc-ds-trong-ma .xc-noi { height: calc(96px * 5 / 4); }
}

/* ── Một dòng cây ── */
.xc-cay {
  display: grid; grid-template-columns: 148px 74px minmax(0, 1fr); align-items: start; padding: 12px; border: 1px solid var(--wow-vien-nhat); border-radius: 12px;
  background: linear-gradient(90deg, rgb(255 255 255 / 0.015), transparent 30%), var(--wow-mat-2);
}
.xc-cay-chay { border-color: rgb(238 77 45 / 0.45); box-shadow: 0 0 28px rgb(238 77 45 / 0.12) inset; }
/* [15/10] nút xoá tay một gốc (cửa don-mau-thu) — góc phải. Bản đầu "✕" mờ 35% ⇒ CEO "đâu thấy nút xoá" ⇒ chữ + viền, đọc được ngay */
.xc-cay { position: relative; }
.xc-xoa { position: absolute; top: 8px; right: 8px; padding: 4px 10px; border: 1px solid var(--wow-vien, #3a2a20); border-radius: 6px;
  background: rgb(0 0 0 / 0.35); color: inherit; opacity: .85; cursor: pointer; font: 600 12px/1.2 Inter, sans-serif; }
.xc-cay > .xc-phai > .xc-ten-sp { padding-right: 56px; } /* tên SP dài không chui dưới nút Xoá */
.xc-xoa:hover { opacity: 1; filter: brightness(1.3); border-color: #ff7a45; }
.xc-goc-anh, .xc-kho-anh {
  position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; padding: 0; border-radius: 8px; overflow: hidden; cursor: pointer;
  background: #000; border: 1px solid var(--wow-vien); filter: saturate(0.85); transition: filter .15s;
}
.xc-goc-anh:hover, .xc-kho-anh:hover { filter: saturate(0.85) brightness(1.2); }
.xc-goc-anh img, .xc-kho-anh img, .xc-bt img, .xc-bt video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.xc-mat-anh::after {
  content: 'Ảnh hết hạn'; text-transform: uppercase; position: absolute; inset: 0; display: grid; place-items: center; padding: 8px; text-align: center;
  font-family: var(--wow-font-mono); font-size: 9px; letter-spacing: 0.18em; color: var(--wow-chu-4);
}
/* [17/10] ô Gốc của việc Rednote thuần đang tìm video — icon giữa ô thay chữ "ảnh hết hạn" */
/* [17/10] trạng thái bóc tách chỉ khi lệch — icon góc ảnh media video */
.xc-hs-goc { position: absolute; top: 6px; right: 6px; }
.xc-goc-tim { position: absolute; inset: 0; display: grid; place-items: center; }
.xc-nhan-goc {
  position: absolute; left: 6px; top: 6px; padding: 2px 7px; border-radius: 4px; background: rgb(7 6 5 / 0.82);
  border: 1px solid var(--wow-chu-4); font-family: var(--wow-font-chu); font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wow-chu-2); /* [03/11] 9,5 ⇒ 10px · [29/10] chữ Việt không mono (cổng font) */
}
.xc-dang {
  position: absolute; left: 6px; bottom: 6px; padding: 2px 6px; border-radius: 4px; background: rgb(7 6 5 / 0.8);
  font-family: var(--wow-font-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--wow-chu-2); /* [03/11] 9 ⇒ 10px */
}
.xc-dang { text-transform: uppercase; } /* [16/10] nhãn nhỏ in hoa bằng CSS, chữ nguồn viết thường (luật viết hoa ba tầng) */

/* ── Đường nối + ×N ── */
/* [14/10] GỐC + mũi tên canh ĐẦU hàng (thẻ biến thể cao ~430px ⇒ canh giữa thì gốc lơ lửng giữa chừng): .xc-noi cao đúng ảnh gốc 4:5 */
.xc-noi { position: relative; display: grid; justify-items: center; gap: 4px; height: calc(148px * 5 / 4); align-content: center; }
.xc-noi::before {
  content: ''; position: absolute; left: 6px; right: 6px; top: 50%; height: 1px;
  background: linear-gradient(90deg, var(--wow-chu-4), var(--wow-cam-sang)); box-shadow: 0 0 8px rgb(255 122 80 / 0.5);
}
.xc-noi::after { content: ''; position: absolute; right: 2px; top: calc(50% - 4px); border: 4px solid transparent; border-left: 6px solid var(--wow-cam-sang); }
.xc-noi-chay::before { background: repeating-linear-gradient(90deg, var(--wow-cam-sang) 0 6px, transparent 6px 12px); animation: xc-chay 0.9s linear infinite; }
@keyframes xc-chay { to { background-position: 12px 0; } }
.xc-he-so {
  position: relative; z-index: 1; padding: 2px 8px; background: var(--wow-mat-2);
  font-family: var(--wow-font-so); font-size: 26px; font-weight: 400; line-height: 1; font-variant-numeric: tabular-nums; color: var(--wow-chu-3);
}
.xc-canh-bao { position: relative; z-index: 1; margin-top: 34px; padding: 0 6px; background: var(--wow-mat-2); font-family: var(--wow-font-mono); font-size: 10.5px; color: #FFC46B; }

/* ── Dải biến thể ── */
.xc-phai { display: grid; gap: 8px; align-content: center; min-width: 0; }
.xc-ten-sp { font-size: 12.5px; color: var(--wow-chu-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* [20/10] CEO "cấm scroll ngang trong toàn bộ hệ sinh thái synd" ⇒ dải biến thể gói dòng, không cuộn ngang */
.xc-dai { display: flex; flex-wrap: wrap; gap: 10px; padding-bottom: 4px; }
.xc-bt {
  position: relative; flex: 0 0 auto; width: 148px; aspect-ratio: 4 / 5; padding: 0; border-radius: 8px; overflow: hidden; cursor: pointer;
  background: #000; border: 1px solid rgb(238 77 45 / 0.55); box-shadow: 0 0 14px rgb(238 77 45 / 0.16); scroll-snap-align: start; transition: filter .15s;
}
.xc-bt:hover { filter: brightness(1.18); }
.xc-bt-canh-moi { border-color: rgb(255 213 196 / 0.35); box-shadow: none; }
.xc-bt-nhan {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 6px 5px; text-align: left;
  background: linear-gradient(transparent, rgb(7 6 5 / 0.92)); font-family: var(--wow-font-mono); font-size: 8.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wow-cam-nhat);
}
.xc-bt-canh-moi .xc-bt-nhan { color: var(--wow-chu-2); }
/* [15/10] dấu trên thẻ biến thể — [04/11] chỉ còn khi trùng CHÉO cùng mã bị chặn đăng (ket_qua.bienThe.trungCheo.caHai); trùng gốc khai tử */
.xc-bt-trung {
  position: absolute; top: 4px; right: 4px; padding: 2px 5px; border-radius: 6px;
  background: rgb(7 6 5 / 0.82); border: 1px solid rgb(120 200 140 / 0.5); color: #9fe0ad;
  font-family: var(--wow-font-mono); font-size: 8px; letter-spacing: 0.06em; white-space: nowrap;
}
.xc-bt-trung-chua { border-color: rgb(238 77 45 / 0.6); color: var(--wow-cam-nhat); }

.xc-bt-khung { cursor: default; border: 1px dashed var(--wow-vien); box-shadow: none; background: linear-gradient(110deg, var(--wow-mat) 30%, #1d1613 50%, var(--wow-mat) 70%); background-size: 300% 100%; animation: xc-nhay 1.6s linear infinite; }
@keyframes xc-nhay { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.xc-dai-loi { align-items: center; flex-wrap: wrap; }
/* [20/10] việc lỗi: lý do in ra mặt (CEO "lỗi mà ko biết chi tiết nguyên nhân") + clip bị loại vẫn xem được */
.xc-dai-loi { flex-direction: column; align-items: stretch; gap: 10px; }
.xc-loi-dong { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.xc-loi-ly { flex: 1 1 220px; min-width: 0; font-family: var(--wow-font-mono); font-size: 11px; line-height: 1.5; color: var(--wow-xau);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.xc-nut-phu { padding: 4px 10px; border: 1px solid var(--wow-vien, #3a2a20); border-radius: 6px; background: transparent; color: var(--wow-chu-2);
  font-size: 12px; cursor: pointer; opacity: 0.8; }
.xc-nut-phu:hover { opacity: 1; filter: brightness(1.3); }
.xc-bi-loai { display: flex; gap: 8px; flex-wrap: wrap; }
.xc-bt-loai { border-color: var(--wow-xau, #e5484d); box-shadow: 0 0 0 1px var(--wow-xau, #e5484d) inset; }
.xc-loi { margin: 0; flex: 1 1 220px; font-family: var(--wow-font-mono); font-size: 11px; line-height: 1.5; color: var(--wow-xau); }

/* ── [14/10] Thẻ gói nội dung: mỗi biến thể một thẻ, đọc từ trên xuống — hình → caption → bình luận ── */
.xc-goi-ds { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; min-width: 0; }
.xc-anh-goi { display: grid; gap: 12px; min-width: 0; }
.xc-goi {
  display: grid; gap: 12px; align-content: start; min-width: 0; padding: 10px; border: 1px solid var(--wow-vien-nhat); border-radius: 10px;
  background: rgb(255 255 255 / 0.015);
}
.xc-goi > .xc-bt { width: 100%; aspect-ratio: auto; height: 210px; }
.xc-goi-nhan { color: var(--wow-cam-nhat); }
/* chữ trái · Chép phải (canh dòng đầu) */
.xc-dong-chep { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 10px; min-width: 0; }
.xc-cap-chu {
  margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--wow-chu-2); min-width: 0;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
}
.xc-cap-thieu .xc-cap-chu { color: var(--wow-chu-4); }
/* [19/10] nút chữ (Chép · Tải · Mở ↗) theo MỘT kiểu chung .rd-mo-qc ở wow-trung-tam — luật cũ ở đây ép <button> về chữ trơn (border 0 · nền none)
   và đổi màu riêng nút Chép ⇒ CEO "quá mờ nhạt"; đã bỏ. Chỉ giữ font-family của nút trình duyệt theo trang */
button.rd-mo-qc { margin: 0; font-family: inherit; }

/* ── Tiến độ 5 đoạn ── */
.xc-tien-do { display: grid; gap: 6px; }
.xc-doan { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 4px; }
.xc-doan > i { height: 3px; border-radius: 2px; background: var(--wow-vien-nhat); }
.xc-doan > i.xc-doan-xong { background: linear-gradient(90deg, #A3301A, var(--wow-cam-sang)); box-shadow: 0 0 8px rgb(255 122 80 / 0.6); }
.xc-doan > i.xc-doan-dang { background: var(--wow-cam-sang); animation: wow-chop 1.2s ease-in-out infinite; }

/* ── [17/10] Sổ khâu: thời gian · model · tiền VNĐ từng khâu (gập = một dòng tổng) ── */
.xc-khau { min-width: 0; }
.xc-khau-tong { cursor: pointer; width: max-content; max-width: 100%; color: var(--wow-chu-2); list-style: none; }
.xc-khau-tong::-webkit-details-marker { display: none; }
.xc-khau-tong::before { content: "▸ "; color: var(--wow-chu-4); }
.xc-khau[open] > .xc-khau-tong::before { content: "▾ "; }
.xc-khau-tong:hover { filter: brightness(1.25); }
/* [09/11] cột thời gian + tiền CỐ ĐỊNH (trước `auto auto`: co theo chữ từng dòng ⇒ cột thời gian 4 vị trí, cổng check-wow-danh-sach-thang-cot bắt);
   tiền dài ("10 credit · 1.240 ký tự") cắt "…", đủ chữ ở title */
.xc-khau-dong { display: grid; grid-template-columns: 18px minmax(0, 1fr) 56px 150px; column-gap: 10px; align-items: baseline;
  padding: 4px 0; border-top: 1px solid var(--wow-vien-nhat); font-size: 12.5px; }
.xc-khau-dong:first-of-type { margin-top: 6px; }
.xc-khau-ten { min-width: 0; color: var(--wow-chu-2); }
.xc-khau-giay, .xc-khau-tien { font-family: var(--wow-font-chu); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.xc-khau-giay { color: var(--wow-chu-3); }
.xc-khau-tien { color: var(--wow-cam-nhat); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.xc-khau-ct { grid-column: 2 / -1; font-family: var(--wow-font-mono); font-size: 11px; color: var(--wow-chu-4); overflow-wrap: anywhere; }
.xc-khau-tien.xc-khau-0 { color: var(--wow-chu-4); }
.xc-khau-dang .xc-khau-ten { color: var(--wow-cam-sang); }

/* ── Gốc chưa nhân ── */
.xc-kho-the { display: grid; gap: 8px; align-content: start; min-width: 0; }

@media (max-width: 720px) {
  .xc-dau-so { width: 100%; }
  .xc-dau-nut { margin-left: 0; }
  .xc-cay { grid-template-columns: 96px 46px minmax(0, 1fr); padding: 10px; }
  .xc-noi { height: calc(96px * 5 / 4); }
  .xc-cay > .xc-phai { grid-column: 1 / -1; margin-top: 10px; } /* 390: thẻ biến thể xuống dưới, đủ bề ngang */
  .xc-he-so { font-size: 19px; padding: 2px 4px; }
  .xc-bt { width: 92px; }
}
@media (prefers-reduced-motion: reduce) {
  .xc-noi-chay::before, .xc-bt-khung, .xc-doan > i.xc-doan-dang { animation: none; }
}

.xc-page { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; font-size: 11.5px; }
.xc-page-ten { font-size: 10.5px; padding: 1px 6px; border-radius: 4px; border: 1px solid var(--wow-vien, #3a2a20); white-space: nowrap; }
/* [14/10] gói bình luận: dòng chữ "↳ … Chép" + MỘT dải ảnh SP gốc (bình luận link + ảnh) — thay 6 hàng "[LINK] Chép" y hệt */
.xc-bl { display: grid; gap: 8px; padding-top: 10px; border-top: 1px solid var(--wow-vien-nhat); min-width: 0; }
.xc-bl-chu {
  margin: 0; font-size: 12px; line-height: 1.45; color: var(--wow-chu-3); min-width: 0;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.xc-bl-chu::before { content: '↳ '; color: var(--wow-chu-4); }
.xc-bl-anh-ds { display: flex; flex-wrap: wrap; gap: 6px; }
.xc-bl-anh { display: block; width: 32px; height: 32px; border-radius: 4px; overflow: hidden; border: 1px solid var(--wow-vien-nhat); transition: filter .15s; }
.xc-bl-anh:hover { filter: brightness(1.25); }
.xc-bl-anh img { width: 100%; height: 100%; object-fit: cover; display: block; }


.xc-sp-chon { border-color: var(--wow-cam); }
.xc-sp-anh { width: 40px; height: 40px; border-radius: 4px; overflow: hidden; background: var(--wow-vien-nhat); }
.xc-sp-anh img { width: 100%; height: 100%; object-fit: cover; display: block; }
.xc-sp-chu { display: grid; gap: 2px; min-width: 0; }
.xc-sp-ten2 {
  font-size: 12.5px; line-height: 1.35; color: var(--wow-chu); min-width: 0;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}

.xc-px { min-height: 240px; }
.xc-px-ds { display: grid; gap: 14px; }
.xc-px-sp { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--wow-vien-nhat); border-radius: 8px; background: var(--wow-mat); min-width: 0; }
/* thẻ mã chưa nạp giữ chỗ bằng thẻ đã nạp (đo 17/10 máy chủ giả: 368px ở 1440 · 509px ở 390) — nở ra khi cuộn tới thì F5 không nhảy vị trí */
.xc-px-cho { min-height: 368px; }
@media (max-width: 760px) { .xc-px-cho { min-height: 509px; } }
.xc-px-dau { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.xc-buoc { display: flex; align-items: center; gap: 8px; padding-top: 10px; border-top: 1px solid var(--wow-vien-nhat); }
.xc-dv { display: grid; gap: 10px; min-width: 0; }
.xc-dv-tom { margin: 0; font-family: var(--wow-font-mono); font-size: 11.5px; letter-spacing: 0.04em; color: var(--wow-chu-2); font-variant-numeric: tabular-nums; }
.xc-dv-dau .xc-kho-anh { border-color: var(--wow-cam); }
/* ô ảnh SP 40px: mất ảnh thì chỉ để ô trống (chữ "ảnh hết hạn" không vừa, tràn ra ngoài — chụp 1440 16/10) */
.xc-sp-anh { position: relative; }
.xc-sp-anh.xc-mat-anh::after { content: none; }

/* [16/10] BƯỚC ② BÓC TÁCH: một hàng trạng thái + nút · lưới thẻ hồ sơ (#thứ tự win) · popup lời theo mốc giờ + từng khung */
.xc-buoc .xc-hs-tt { margin-left: 4px; }
.xc-buoc .xc-hs-nut { margin-left: auto; min-height: 30px; padding: 0 14px; font-size: 10.5px; letter-spacing: 0.12em; }
.xc-hs-luoi { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.xc-hs {
  display: grid; gap: 3px; justify-items: start; text-align: left; padding: 8px 10px; min-width: 0;
  border: 1px solid var(--wow-vien); border-radius: 6px; background: transparent; color: var(--wow-chu); font: inherit; font-size: 11.5px; cursor: pointer;
  transition: border-color .15s, filter .15s;
}
.xc-hs:not(:disabled):hover { border-color: var(--wow-cam); filter: brightness(1.15); }
.xc-hs-chua { border-style: dashed; color: var(--wow-chu-3); cursor: default; }
.xc-hs-so { font-family: var(--wow-font-mono); font-size: 10.5px; color: var(--wow-cam-sang); font-variant-numeric: tabular-nums; }
.xc-hs small { font-size: 9.5px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xc-hs-hop { max-width: 640px; width: calc(100vw - 32px); }
.xc-hs-bc { margin: 0; line-height: 1.5; text-transform: none; letter-spacing: 0.02em; }
.xc-hs-h { margin: 14px 0 6px; font-weight: 400; font-size: 12px; letter-spacing: 0.04em; color: var(--wow-chu-2); } /* [16/10] tiêu đề = tầng 1 viết hoa ba tầng ⇒ hiện đúng chữ nguồn (chỉ hoa chữ đầu), bỏ in hoa CSS */
.xc-hs-ds { display: grid; gap: 4px; max-height: 34vh; overflow-y: auto; }
.xc-hs-dong { display: grid; grid-template-columns: 82px minmax(0, 1fr) auto; gap: 10px; /* [19/10] cột 3 cho nhãn "hook" — trước rớt xuống dòng riêng (soi popup Hồ sơ gốc) */ font-size: 12.5px; line-height: 1.5; padding: 3px 0; border-bottom: 1px solid var(--wow-vien-nhat); }
.xc-hs-gio { font-family: var(--wow-font-mono); font-size: 10.5px; color: var(--wow-chu-3); font-variant-numeric: tabular-nums; padding-top: 2px; }
@media (max-width: 760px) { .xc-hs-luoi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .xc-hs { transition: none; } }

/* [16/10] POPUP MEDIA + CAPTION (bấm thẻ ở bước Đầu vào): video dọc bên trái · caption nguyên văn bên phải; điện thoại xếp chồng */
.xc-md-hop { max-width: 860px; width: calc(100vw - 32px); }
.xc-md-than { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 18px; align-items: start; margin-top: 10px; }
@media (max-width: 700px) { .xc-md-than { grid-template-columns: minmax(0, 1fr); } }
.xc-md-khung { display: grid; gap: 8px; }
.xc-md-video { width: 100%; max-height: 72vh; aspect-ratio: 9 / 16; object-fit: contain; background: #000; border: 1px solid var(--wow-vien); border-radius: 8px; display: block; }
.xc-md-hong { margin: 0; text-transform: none; letter-spacing: 0.02em; color: var(--wow-xau); }
.xc-md-cap { display: grid; gap: 8px; min-width: 0; }
.xc-md-cap-dau { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
/* [19/10] nhãn Caption đứng trái, hai nút (kiểu chung .rd-mo-qc) dồn phải */
.xc-md-cap-dau > .wow-nhan { margin-right: auto; }
.xc-md-chu {
  margin: 0; white-space: pre-wrap; word-break: break-word; font-family: var(--wow-font-chu); font-size: 13px; line-height: 1.6;
  color: var(--wow-chu); max-height: 60vh; overflow-y: auto; padding: 12px; border: 1px solid var(--wow-vien-nhat); border-radius: 6px; background: var(--wow-mat);
}

/* [17/10] logo rednote nhỏ + số trên nhãn Gốc (cùng bộ logo hàng Tài khoản) · chip trùng gốc / cảnh báo = icon + số */
.xc-dang-rednote { display: inline-flex; align-items: center; gap: 3px; }
.xc-dang-rednote svg { width: 12px; height: 12px; color: #FF2442; }
.xc-bt-trung, .xc-canh-bao { display: inline-flex; align-items: center; gap: 3px; }
/* [17/10] GĐ1: mỗi SP chia luồng theo định dạng (Video · Ảnh) — mỗi luồng một dải media + các bước của luồng đó */
.xc-luong { display: grid; gap: 10px; min-width: 0; }
.xc-luong-ten { font-size: 12.5px; color: var(--wow-chu); }
.xc-hs-hook { color: var(--wow-cam-sang); text-transform: uppercase; letter-spacing: 0.1em; }

/* [17/10 chiều] KÉO THẢ TAY quay lại (CEO "1 cột danh sách như trello bên cạnh… chụp kéo qua") — [Sản phẩm] ⇢ [Phân xưởng] khi mảng Xưởng tắt.
   Dưới 760px: một cột (nút → thay kéo thả trên màn chạm) */
.xc-luoi3 { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1100px) { .xc-luoi3 { grid-template-columns: 260px minmax(0, 1fr); } }
@media (max-width: 760px) { .xc-luoi3 { grid-template-columns: minmax(0, 1fr); } }
.xc-ds-sp { position: sticky; top: 12px; }
.xc-sp-cuon { display: grid; gap: 6px; max-height: calc(100vh - 150px); overflow-y: auto; padding-right: 4px; margin-right: -4px; }
@media (max-width: 760px) { .xc-ds-sp { position: static; } .xc-sp-cuon { max-height: 46vh; } }
.xc-sp-keo {
  display: grid; grid-template-columns: 30px 40px minmax(0, 1fr) auto; gap: 10px; align-items: center;
  padding: 8px 10px; border: 1px solid var(--wow-vien-nhat); border-radius: 6px; background: var(--wow-mat);
  cursor: grab; transition: border-color .15s, filter .15s;
}
.xc-sp-keo:hover { border-color: var(--wow-vien); filter: brightness(1.12); }
.xc-sp-keo:active { cursor: grabbing; }
.xc-dang-keo { opacity: 0.45; border-style: dashed; }
/* [18/10] mã tụt ngoài top xưởng — xám, không kéo, không ô "+" (lý do ở gợi ý) */
.xc-sp-hang { font-family: var(--wow-font-mono); font-size: 11px; color: var(--wow-cam-sang); font-variant-numeric: tabular-nums; }
.xc-sp-dua {
  width: 28px; height: 28px; border: 1px solid var(--wow-vien); border-radius: 50%; background: transparent; color: var(--wow-chu-2);
  font: inherit; cursor: pointer; opacity: 0; transition: opacity .15s, border-color .15s, color .15s;
}
.xc-sp-keo:hover .xc-sp-dua, .xc-sp-dua:focus-visible { opacity: 1; }
.xc-sp-dua:hover { border-color: var(--wow-cam); color: var(--wow-cam-nhat); }
@media (hover: none) { .xc-sp-dua { opacity: 1; } }
.xc-px { transition: box-shadow .15s, border-color .15s; }
.xc-px-tha { border-color: var(--wow-cam); box-shadow: inset 0 0 0 1px var(--wow-cam), 0 0 0 4px var(--wow-cam-mo); }
.xc-px-trong { padding: 48px 12px; border: 1px dashed var(--wow-vien); border-radius: 8px; font-size: 22px; }
.xc-px-go {
  padding: 4px 12px; border: 1px solid var(--wow-vien); border-radius: 6px; background: transparent; color: var(--wow-chu-3);
  font: inherit; font-size: 11px; letter-spacing: 0.08em; cursor: pointer;
}
.xc-px-go:hover:not(:disabled) { border-color: var(--wow-xau); color: var(--wow-xau); }
@media (prefers-reduced-motion: reduce) { .xc-sp-keo, .xc-sp-dua, .xc-px { transition: none; } }

/* [17/10 chiều] CEO "UI cái này nên gọn gàng lại đi. tốn không gian quá" (thẻ mã màn Xưởng) — đo máy chủ giả: thẻ 1.144px ở 1440.
   Nhãn bước (Video · Bóc tách · Biến thể) sang CỘT TRÁI 96px, nội dung bên phải (bỏ một hàng mỗi bước); media · hồ sơ · biến thể nhỏ một nấc. 390px giữ xếp chồng. */
@media (min-width: 761px) {
  .xc-px-sp .xc-luong { grid-template-columns: 96px minmax(0, 1fr); column-gap: 14px; row-gap: 10px; align-items: start; padding-top: 10px; border-top: 1px solid var(--wow-vien-nhat); }
  .xc-px-sp .xc-luong > .xc-buoc { grid-column: 1; flex-direction: column; align-items: flex-start; gap: 4px; padding-top: 2px; border-top: 0; }
  .xc-px-sp .xc-luong > :not(.xc-buoc) { grid-column: 2; }
  .xc-px-sp .xc-buoc .xc-hs-tt { margin-left: 0; }
  .xc-px-sp .xc-buoc .xc-hs-nut { margin-left: 0; min-height: 26px; padding: 0 10px; }
}
.xc-px-sp { gap: 10px; padding: 12px; }
.xc-px-sp .xc-kho-the { gap: 6px; }
.xc-px-sp .xc-hs-luoi { grid-template-columns: repeat(auto-fill, minmax(140px, 180px)); gap: 6px; }
.xc-px-sp .xc-hs { padding: 6px 8px; font-size: 11px; }
.xc-ds-trong-ma .xc-cay { grid-template-columns: 72px 56px minmax(0, 1fr); padding: 8px; }
.xc-ds-trong-ma .xc-noi { height: calc(72px * 5 / 4); }
.xc-ds-trong-ma .xc-he-so { font-size: 18px; }
.xc-ds-trong-ma .xc-goi-ds { grid-template-columns: repeat(auto-fill, minmax(240px, 320px)); gap: 8px; }
.xc-ds-trong-ma .xc-goi { gap: 8px; padding: 8px; }
.xc-ds-trong-ma .xc-goi:has(> .xc-bt) { grid-template-columns: 84px minmax(0, 1fr); }
.xc-ds-trong-ma .xc-goi > .xc-bt { width: 84px; }
.xc-px-sp .xc-px-dau { grid-template-columns: 40px minmax(0, 1fr) auto auto; } /* Gỡ cùng hàng tên SP (không rơi xuống hàng riêng) */
@media (max-width: 760px) {
  .xc-px-sp .xc-hs-luoi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .xc-px-sp .xc-buoc { padding-top: 8px; }
}
/* [17/10] nhãn phương án trên từng dòng biến thể (CEO "không biết của hệ nào") — chip nhỏ đầu cột phải */
.xc-pa-nhan { justify-self: start; padding: 2px 8px; border: 1px solid rgb(238 77 45 / 0.55); border-radius: 999px; color: var(--wow-cam-nhat);
  font-family: var(--wow-font-chu); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; } /* [29/10] chữ Việt không mono (cổng font) */
/* [17/10 chiều] nút PHƯƠNG ÁN ở góc phải thẻ mã (CEO "mỗi nút ấn là 1 phương án… ấn nút là chạy") — một nhóm, cùng cỡ, trạng thái là icon đầu nút */
.xc-pa-chay { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 12px; font-size: 11px; letter-spacing: 0.08em; white-space: nowrap; }
.xc-pa-chay-bat:not(:disabled) { border-color: rgb(238 77 45 / 0.7); color: var(--wow-cam-nhat); }
.xc-pa-chay:disabled { opacity: 0.55; cursor: not-allowed; }
/* [18/10] ô Rednote đầu thẻ (barem chỉ cần SP) xoá cùng barem Rednote ⇒ đầu thẻ còn ảnh · tên · Trang Shopee · Gỡ */
.xc-px-sp .xc-px-dau { grid-template-columns: 40px minmax(0, 1fr) auto auto; }
@media (max-width: 760px) { .xc-px-sp .xc-px-dau { grid-template-columns: 40px minmax(0, 1fr) auto; } }
/* [18/10] popup Chi phí 1 video: cột tiền xuống dòng được (390px) */
.ai-bang td.xc-cp-tien { white-space: normal; min-width: 9em; }
/* [18/10] GỐC của sơ đồ gốc → barem (CEO "mỗi mã tiềm năng có nhiều video gốc để làm các barem… gọn gàng trực quan") — ảnh gốc + logo nền tảng + hạng */
/* [18/10] CEO "các mã về đó thì phải gắn logo của nền tảng ở góc dưới cho dễ nhận biết. như facebook - tiktok - rednote" — logo MỘT bộ (veLogoTk), góc
   dưới trái ẢNH, nền tối để đọc được trên mọi ảnh bìa; đủ màu thương hiệu (có nguồn = có, không trạng thái chồng lên) */
.xc-mt-nguon { position: absolute; left: 4px; top: calc(var(--xc-mm-cao, 96px) - 28px); width: 24px; height: 24px; display: grid; place-items: center; border-radius: 6px;
  background: rgba(8, 6, 5, 0.72); pointer-events: none; z-index: 1; }
.xc-mt-nguon svg { width: 18px; height: 18px; display: block; }
.xc-mt-nguon.facebook { color: var(--wow-mau-facebook); }
.xc-mt-nguon.tiktok { color: var(--wow-mau-tiktok); }
.xc-mt-nguon.rednote { color: var(--wow-mau-rednote); }
/* [20/10] hạng (dòng đã theo điểm nguồn) ở góc trên ảnh · lượt xem là dòng chú thích dưới ảnh — "#2 · 28,5k xem" chung một nhãn tràn khỏi ảnh 64px */
.xc-mt-hang { position: absolute; left: 4px; top: 4px; padding: 1px 5px; border-radius: 5px; background: rgba(8, 6, 5, 0.78); z-index: 1;
  font-family: var(--wow-font-mono); font-size: 10px; line-height: 1.5; color: var(--wow-chu, #f3e9e2); white-space: nowrap; pointer-events: auto; }
.xc-dv-dau .xc-mt-hang { color: var(--wow-cam-nhat, #ff9a6b); }
.xc-mt-xem { display: block; margin-top: 3px; text-align: center; font-family: var(--wow-font-mono); font-size: 10px; line-height: 1.3;
  color: var(--wow-chu-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xc-mt-vuot { color: var(--wow-cam-nhat, #ff9a6b); } /* [20/10] vượt ≥2× mức thường của kênh — điều đáng nhìn */
.xc-mt-bom { color: var(--wow-xau); font-family: var(--wow-font-chu); } /* [23/10] chữ Việt không đi font mono (luật Giao diện WOW ý 9) */
.xc-mt-tat { opacity: 0.55; }
.xc-mt-don { font-family: var(--wow-font-chu); } /* [23/10] "N đơn" có chữ Việt */
/* [24/10] chỉ số tư liệu HAI dòng (CEO khoanh "gấp 17× k…" bị cắt): số to trên · nhãn nhỏ dưới, căn giữa dưới ảnh, không cắt chữ; chữ Việt font chữ */
.xc-mt-2dong { white-space: normal; overflow: visible; font-family: var(--wow-font-chu); line-height: 1.15; }
.xc-mt-2dong .xc-mt-so { display: block; font-weight: 600; font-size: 12px; letter-spacing: 0; color: var(--wow-chu, #f3e9e2); }
.xc-mt-2dong.xc-mt-vuot .xc-mt-so { color: var(--wow-cam-nhat, #ff9a6b); }
.xc-mt-2dong.xc-mt-bom .xc-mt-so { color: var(--wow-xau); font-size: 10.5px; }
.xc-mt-2dong .xc-mt-nhan { display: block; font-size: 9.5px; color: var(--wow-chu-4); }
.xc-mt-e { opacity: 0.4; filter: grayscale(1); } /* [23/10] tư liệu hạng ế — xưởng tự động không lấy (trừ suất thăm dò) */
/* [18/10] THAM CHIẾU vs TƯ LIỆU MỚI (CEO "cái nào chỉ để tham chiếu thì nên hiển thị 1 góc màu xám… tư liệu mới… list danh sách vào auto đảo"):
   ads FB đối thủ = dải ảnh nhỏ XÁM ở góc phải đầu thẻ (một logo Facebook cho cả dải, xám = không làm) · ma trận chỉ còn tư liệu mới */
.xc-px-sp .xc-px-dau { grid-template-columns: 40px minmax(0, 1fr) auto auto auto; }
.xc-tc-o:empty { display: none; }
.xc-tc { display: flex; flex-wrap: wrap; max-width: 100%; align-items: center; gap: 4px; padding: 3px 6px; border: 1px solid var(--wow-vien-nhat); border-radius: 8px; background: rgba(255, 255, 255, 0.02); }
.xc-tc-logo { display: grid; place-items: center; width: 18px; height: 18px; color: var(--wow-chu-nhat, var(--wow-chu)); filter: grayscale(1); opacity: 0.6; }
.xc-tc-logo svg { width: 14px; height: 14px; display: block; }
.xc-tc-anh { position: relative; width: 30px; height: 40px; flex: none; padding: 0; overflow: hidden; border: 1px solid var(--wow-vien-nhat); border-radius: 5px; background: rgba(0, 0, 0, 0.3); }
.xc-tc-anh img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); opacity: 0.5; }
button.xc-tc-anh { cursor: pointer; }
button.xc-tc-anh:hover img { opacity: 0.8; }
.xc-tc-ic { position: absolute; right: 1px; bottom: 1px; line-height: 0; }
.xc-tc-ic .tt-ic { width: 14px; height: 14px; background: rgba(8, 6, 5, 0.85); box-shadow: none; }
.xc-tc-ic .tt-ic svg { width: 9px; height: 9px; }
.xc-tc-them { font-family: var(--wow-font-mono); font-size: 10px; color: var(--wow-chu-nhat, var(--wow-chu)); opacity: 0.7; padding: 0 2px; }
/* [04/11] dải kho source (kênh nhãn hàng / người nổi tiếng) — ảnh màu, nhãn nhỏ; khác dải tham chiếu xám */
.xc-ks-nhan { font-size: 11px; color: var(--wow-chu-nhat, var(--wow-chu)); opacity: 0.8; white-space: nowrap; }
.xc-ks-anh img { filter: none; opacity: 0.9; }
.xc-ks-video { display: block; max-width: min(360px, 100%); max-height: 70vh; margin: 0 auto; }
.xc-chua-tlm { display: flex; align-items: center; gap: 6px; margin: 0; padding-top: 10px; border-top: 1px solid var(--wow-vien-nhat); font-size: 12px; color: var(--wow-chu-nhat, var(--wow-chu)); opacity: 0.75; }
@media (max-width: 760px) {
  .xc-px-sp .xc-px-dau { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .xc-px-sp .xc-px-dau > .xc-tc-o { grid-column: 1 / 3; grid-row: 2; justify-self: start; min-width: 0; }
  .xc-px-sp .xc-px-dau > .xc-px-go { justify-self: end; }
  .xc-tc { gap: 3px; padding: 3px 4px; }
  .xc-tc-anh { width: 26px; height: 36px; }
}

/* [19/10] CEO chụp khối cây to dưới màn "rối rắm… chờ đăng à": video đã làm của mã thành DẢI Ô NHỎ trong thẻ mã (cột Sản phẩm · khối Đã rời xưởng) —
   ô dọc 9:16 + MỘT dấu trạng thái góc; bấm mở popup cây biến thể. Thẻ biến thể trong popup đặt video bên trái, chữ bên phải (một hàng, không tầng dọc). */
.xc-vd-dai { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.xc-vd-o {
  position: relative; width: 46px; aspect-ratio: 9 / 16; padding: 0; border: 1px solid var(--wow-vien); border-radius: 5px; overflow: hidden;
  background: #000; cursor: pointer; transition: filter .15s;
}
.xc-vd-o:hover { filter: brightness(1.2); }
.xc-vd-o video, .xc-vd-o img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.xc-vd-ic { position: absolute; top: 3px; right: 3px; display: grid; place-items: center; border-radius: 50%; background: rgb(7 6 5 / 0.8); }
.xc-vd-so { position: absolute; left: 3px; bottom: 3px; padding: 0 3px; border-radius: 3px; background: rgb(7 6 5 / 0.8); font-family: var(--wow-font-mono); font-size: 10px; color: var(--wow-cam-nhat); } /* [03/11] 9 ⇒ 10px: chữ trên màn không dưới 10px */
.xc-sp-roi { grid-template-columns: 40px minmax(0, 1fr); cursor: default; }
.xc-roi-ds { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.xc-goi-ds { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.xc-goi:has(> .xc-bt) { grid-template-columns: 112px minmax(0, 1fr); column-gap: 12px; row-gap: 8px; }
.xc-goi > .xc-bt { grid-row: 1 / span 6; width: 112px; height: auto; aspect-ratio: 9 / 16; }
@media (prefers-reduced-motion: reduce) { .xc-vd-o { transition: none; } }

/* [20/10] SƠ ĐỒ NỐI GỐC → BAREM (CEO "nối mindmap workflow dạng canvas nhưng gọn gàng tí, để dễ hình dung đang hover vào video nào, rồi cái nào chưa tới lượt
   thì cũng báo hiệu kế tiếp nhẹ nhàng thôi chứ ra 1 khung xoay khó chịu lắm"). Mỗi gốc một dòng: [ảnh] ── nhánh ──▶ MỘT nút mỗi barem (chưa có việc ⇒ viên
   mờ "+ barem"). Dây = viền CSS (không canvas/SVG đo vị trí: màn vẽ lại 15″, dòng tự cao theo nút). Đầu nút cao 30px ⇒ tâm 15px; nhánh đẩy xuống để nút
   đầu thẳng tâm ảnh gốc. [20/10 soi ảnh — CEO "hơi kỳ kỳ, bị gồng"] bỏ cột ô barem (chấm lặp lại nút) · nút rộng vừa nội dung, không kéo 520px. */
.xc-mm { --xc-mm-cao: 96px; --xc-mm-tam: 15px; --xc-mm-ngang: 28px; --xc-mm-day: rgb(var(--wow-cam-rgb) / 0.3);
  display: grid; gap: 12px; padding-top: 12px; border-top: 1px solid var(--wow-vien-nhat); }
.xc-mm-soat { margin: 0; line-height: 0; }
.xc-mm-dong { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: start; transition: filter .15s; }
.xc-mm .xc-kho-the { position: relative; }
.xc-mm .xc-kho-anh { height: var(--xc-mm-cao); max-height: var(--xc-mm-cao); }
/* rê một dòng ⇒ các dòng khác chìm (chỉ đổi độ sáng — luật hover) */
.xc-mm:has(.xc-mm-dong:hover) .xc-mm-dong:not(:hover) { filter: brightness(0.55); }
.xc-mm-dong:hover .xc-mm-nhanh { --xc-mm-day: rgb(var(--wow-cam-sang-rgb) / 0.75); }

/* nhánh: dây ngang từ ảnh gốc ⇒ trục dọc ⇒ khuỷu vào từng nút */
.xc-mm-nhanh { position: relative; display: grid; gap: 8px; justify-items: start; min-width: 0;
  padding-left: var(--xc-mm-ngang); padding-top: calc(var(--xc-mm-cao) / 2 - var(--xc-mm-tam) - 1px); }
.xc-mm-nut { position: relative; min-width: 0; width: fit-content; max-width: min(100%, 480px); display: grid; gap: 6px; padding: 0 10px 8px;
  border: 1px solid var(--wow-vien-nhat); border-radius: 8px; background: rgba(255, 255, 255, 0.02); }
.xc-mm-nut::before, .xc-mm-nut::after { content: ""; position: absolute; pointer-events: none; border-color: var(--xc-mm-day); transition: border-color .15s; }
.xc-mm-nut:first-child::before { left: calc(-1 * var(--xc-mm-ngang) - 1px); top: var(--xc-mm-tam); width: var(--xc-mm-ngang); border-top: 1px solid var(--xc-mm-day); }
.xc-mm-nut:not(:first-child)::before { left: calc(-1 * var(--xc-mm-ngang) / 2 - 1px); top: 0; width: calc(var(--xc-mm-ngang) / 2); height: var(--xc-mm-tam);
  border-left: 1px solid var(--xc-mm-day); border-bottom: 1px solid var(--xc-mm-day); border-bottom-left-radius: 8px; }
.xc-mm-nut:not(:last-child)::after { left: calc(-1 * var(--xc-mm-ngang) / 2 - 1px); top: var(--xc-mm-tam); bottom: -9px; border-left: 1px solid var(--xc-mm-day); }
.xc-mm-nut-dau { min-height: 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; cursor: pointer; min-width: 0; }
.xc-mm-nut-dau .xc-xoa { margin-left: auto; opacity: 0; transition: opacity .15s; }
.xc-mm-nut:hover .xc-mm-nut-dau .xc-xoa, .xc-mm-nut-dau .xc-xoa:focus-visible { opacity: 1; }
.xc-mm-nut-dau .wow-nut { min-height: 0; padding: 3px 10px; font-size: 12px; }
.xc-mm-pa { font-family: var(--wow-font-chu); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wow-cam-nhat); white-space: nowrap; }
.xc-mm-nut-dau:hover .xc-mm-pa { filter: brightness(1.3); }
.xc-mm-ly { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; font-size: 12px; color: var(--wow-chu-3); }
.xc-mm-ly > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* barem chưa có việc ⇒ viên mờ "+ barem": cùng dây, không khung đặc, sáng lên khi rê */
.xc-mm-trong { min-height: 30px; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px 0 10px; border-style: dashed; background: transparent;
  font: inherit; color: var(--wow-chu-4); cursor: pointer; }
.xc-mm-trong .xc-mm-pa { color: var(--wow-chu-4); }
.xc-mm-cong { font-size: 14px; line-height: 1; }
.xc-mm-trong:hover:not(:disabled) { filter: brightness(1.6); }
.xc-mm-trong:disabled { opacity: 0.4; cursor: not-allowed; }
/* chờ ⇒ nhẹ: viền đứt, chữ mờ, không icon xoay, không ô giữ chỗ */
.xc-mm-tt-cho { border-style: dashed; background: transparent; padding-bottom: 0; }
.xc-mm-tt-cho .xc-mm-pa { color: var(--wow-chu-4); }
.xc-mm-ke { font-family: var(--wow-font-chu); font-size: 11px; color: var(--wow-chu-4); }
/* đang làm ⇒ dây + viền cam (dòng chảy đang sống); thanh khâu cần bề ngang nên nút rộng cố định */
.xc-mm-tt-dang-chay { width: min(100%, 380px); border-color: rgb(var(--wow-cam-rgb) / 0.45); --xc-mm-day: rgb(var(--wow-cam-rgb) / 0.55); }
/* xong ⇒ ô video đứng TRƯỚC tên barem trên cùng một hàng (bản đầu: ô video dưới đầu nút ⇒ khung to rỗng bên phải) */
.xc-mm-tt-xong { display: flex; align-items: flex-start; gap: 10px; padding: 0 10px 6px 6px; }
.xc-mm-tt-xong > .xc-vd-o { order: -1; width: 40px; flex: none; margin-top: 6px; }
/* [24/10] CEO chụp "nhồi nhét kỳ kỳ": .xc-xoa gốc là position:absolute góc phải thẻ cây ⇒ trên nút việc hẹp nó ĐÈ chữ "Gốc đảo"; dấu 22px phủ 2/3 ô 36px.
   Nay nút xong xếp dọc (tên barem · Xoá dưới, chỉ hiện khi rê) và dấu trên ô video thu thành chấm nhỏ góc (luật UI: trạng thái = chấm nhỏ ở góc) */
.xc-mm-nut-dau .xc-xoa { position: static; }
.xc-mm-tt-xong .xc-mm-nut-dau { flex-direction: column; align-items: flex-start; gap: 6px; }
.xc-mm-tt-xong .xc-mm-nut-dau .xc-xoa { margin-left: 0; }
.xc-mm-tt-xong .xc-vd-ic { top: 2px; right: 2px; }
.xc-mm-tt-xong .xc-vd-ic .tt-ic { width: 14px; height: 14px; box-shadow: none; }
.xc-mm-tt-xong .xc-vd-ic .tt-ic svg { width: 9px; height: 9px; }
/* clip bị loại trên nút lỗi: cỡ ô video nhỏ (như ô video đã làm) — thẻ to 9:16 làm nút cao vọt; bấm vẫn phát to */
.xc-mm-nut .xc-bi-loai .xc-bt { width: 64px; height: auto; aspect-ratio: 9 / 16; }
.xc-mm-nut .xc-bi-loai .xc-bt-nhan { font-size: 9px; gap: 3px; white-space: nowrap; letter-spacing: 0.04em; }
.xc-mm-nut .xc-bi-loai .xc-bt-nhan .tt-ic { width: 16px; height: 16px; }
.xc-mm-nut .xc-bi-loai .xc-bt-nhan .tt-ic svg { width: 10px; height: 10px; }

/* điện thoại: ảnh nhỏ một nấc, dây ngắn — vẫn toả ngang (nút vừa nội dung, đo 390 không cuộn) */
@media (max-width: 760px) {
  .xc-mm { --xc-mm-cao: 84px; --xc-mm-ngang: 16px; }
  .xc-mm-dong { grid-template-columns: 52px minmax(0, 1fr); }
  .xc-mt-xem { font-size: 9px; letter-spacing: -0.03em; } /* "39,4k xem" vừa 52px, không cắt "x…" */
}
@media (prefers-reduced-motion: reduce) { .xc-mm-dong, .xc-mm-nut::before, .xc-mm-nut::after { transition: none; } }

/* [23/10] popup Kho âm thanh (wow-xuong-kho-am-thanh) — tiếng đang tắt mờ · nhãn AI tự học chip nhỏ · số lượt thẳng cột */
.kat-phan { display: grid; gap: 8px; min-width: 0; }
.kat-phan h3 { margin: 0; font-family: var(--wow-font-chu); font-size: 15px; letter-spacing: .04em; }
.kat-bang td:nth-child(2) { width: 100%; }
.kat-bang .kat-so { text-align: right; font-variant-numeric: tabular-nums; }
.kat-tat td:nth-child(2), .kat-tat .kat-so { opacity: .45; }
.kat-moi { margin-left: 8px; font-family: var(--wow-font-chu); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--wow-cam, #ff7a1a); }
/* [23/10] CEO chụp màn (2 lần): cột tên căn phải lệch — luật .rd-bang trong trang cùng độ ưu tiên, nạp sau nên thắng ⇒ nâng .rd-bang.kat-bang; nút "!" hẹp hơn nút ▶ ⇒ căn trái, nút cố định; tiếng chưa sinh nút mờ */
.rd-bang.kat-bang th, .rd-bang.kat-bang td { text-align: left; vertical-align: middle; font-family: var(--wow-font-chu); }
.rd-bang.kat-bang td:first-child { min-width: 0; width: 44px; } /* luật chung .rd-bang cho ô đầu min-width 160px ⇒ cột nút nghe rộng hoác */
.rd-bang.kat-bang th.kat-so, .rd-bang.kat-bang td.kat-so { text-align: right; }
.kat-bang .kat-nghe { width: 36px; min-width: 36px; padding-inline: 0; text-align: center; }
.kat-bang .kat-chua-sinh { opacity: .4; }
.kat-bang .kat-chua-sinh:hover { opacity: .8; }

.kat-nguon { display: block; margin-top: 2px; font-family: var(--wow-font-chu); font-size: 11px; color: var(--wow-chu-3); } /* [23/10] nguồn từng bản tiếng: Freesound · Mixkit · AI */
.rd-bang.kat-bang tr.kat-nhom td { padding-top: 16px; font-family: var(--wow-font-chu); font-size: 13px; font-weight: 600; color: var(--wow-cam-sang, #ff9a5a); border-bottom: 1px solid var(--wow-vien, rgb(255 255 255 / 0.12)); } /* [23/10] tiêu đề nhóm danh mục âm thanh */
/* [23/10] dải ảnh khung tại mỗi chỗ chèn ASMR/hiệu ứng — gói dòng, không cuộn ngang; viền cam = tiếng rơi trong lúc giọng đang nói */
.xc-am-dai { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.xc-am-o { margin: 0; width: 56px; display: grid; gap: 2px; justify-items: center; }
.xc-am-o img { width: 56px; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 4px; border: 1px solid var(--wow-vien, rgb(255 255 255 / 0.12)); }
.xc-am-trong-loi img { border-color: var(--wow-cam, #ff7a1a); }
.xc-am-o figcaption { font-family: var(--wow-font-chu); font-size: 11px; color: var(--wow-chu-3); font-variant-numeric: tabular-nums; }

/* [24/10] bảng chi phí hai giá cạnh biến thể đã xong (CEO "bảng tổng chi phí lẫn liệt kê chi phí từng khâu… giá thực tế · giá theo API") —
   tên khâu co giãn cắt "…" (title giữ câu đủ), hai cột số thẳng hàng; 0đ chìm, phần chưa có giá cam — chỉ cái lệch nổi lên */
.xc-mm-tt-xong { max-width: min(100%, 560px); }
.xc-mm-tt-xong:has(.xc-cp) { flex-wrap: wrap; }
.xc-cp { order: 2; flex: 1 1 100%; min-width: 0; display: grid; gap: 1px; margin-top: 6px; font-family: var(--wow-font-chu); font-size: 11px; line-height: 1.45; }
.xc-cp-dong { display: grid; grid-template-columns: minmax(0, 1fr) 72px 72px; gap: 8px; align-items: baseline; color: var(--wow-chu-3); }
.xc-cp-ten { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.xc-cp-so { text-align: right; font-family: var(--wow-font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--wow-chu-2); }
.xc-cp-dau .xc-cp-so { font-family: var(--wow-font-chu); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--wow-chu-4); }
.xc-cp-tong { padding-bottom: 3px; margin-bottom: 2px; border-bottom: 1px solid var(--wow-vien-nhat); color: var(--wow-chu-2); font-weight: 600; }
.xc-cp-tong .xc-cp-so { color: var(--wow-cam-nhat); }
.xc-cp-0 { color: var(--wow-chu-4); }
.xc-cp-thieu { color: #f2b84b; font-family: var(--wow-font-chu); }
@media (max-width: 600px) { .xc-cp-dong { grid-template-columns: minmax(0, 1fr) 58px 58px; gap: 6px; } }
/* màn rộng: bảng nằm cạnh ô video (dưới tên barem), không chừa khoảng trống dưới ô video */
@media (min-width: 601px) {
  .xc-mm-tt-xong:has(.xc-cp) { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 10px; align-items: start; }
  .xc-mm-tt-xong:has(.xc-cp) > .xc-vd-o { grid-row: 1 / 3; }
  .xc-mm-tt-xong:has(.xc-cp) > .xc-cp { grid-column: 2; margin-top: 2px; }
  .xc-mm-tt-xong:has(.xc-cp) .xc-mm-nut-dau { flex-direction: row; align-items: center; }
  .xc-mm-tt-xong:has(.xc-cp) .xc-mm-nut-dau .xc-xoa { margin-left: auto; padding: 2px 8px; }
}

/* [24/10 bản 3] BẢNG GỐC CỦA MÃ (bangGocXc) — NGUỒN │ XỬ LÝ │ KẾT QUẢ │ CHI PHÍ, mỗi gốc một hàng, mỗi bước một dòng con. CEO 24/10 "nhìn rối loạn… đen chẳng
   thấy gì… chi phí bao nhiêu chứ". Gói dòng theo bề rộng KHUNG (@container), cấm cuộn ngang; chữ Việt font chữ, số tiền font số. */
.xc-gb { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 10px; container-type: inline-size; }
.xc-gb-tong { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; color: var(--wow-chu-2); }
.xc-gb-tien { display: inline-flex; align-items: baseline; gap: 8px; }
.xc-gb-tien b { font-family: var(--wow-font-so); font-size: 16px; font-weight: 400; color: var(--wow-cam-sang); }
.xc-gb-api { font-family: var(--wow-font-chu); font-size: 11.5px; color: var(--wow-chu-2); }
.xc-gv { display: grid; grid-template-columns: minmax(150px, 1.1fr) minmax(0, 2fr) 84px; gap: 10px; align-items: start; }
.xc-gb-cot { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 10px; padding: 0 9px; font-family: var(--wow-font-chu); font-size: 11.5px;
  color: var(--wow-chu-2); }
.xc-gb-cot .xc-gv-cot { background: none; padding-top: 0; padding-bottom: 0; }
.xc-gv-cot > :last-child, .xc-gv-cp { text-align: right; }
/* đầu cột là tiêu đề của CẢ danh sách mã ⇒ chỉ thẻ mã hiện đầu tiên mang nó (thẻ sau có thẻ hiện đứng trước thì ẩn) — không lặp mỗi mã */
.xc-px-sp:not([hidden]) ~ .xc-px-sp .xc-gb-cot { display: none; }
.xc-gh { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 10px; padding: 8px; border: 1px solid var(--wow-vien-nhat); border-radius: 12px; }
.xc-gn { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.xc-gn .xc-mt { width: 100%; }
.xc-gn-ten { font-family: var(--wow-font-chu); font-size: 11.5px; color: var(--wow-chu-1, #eee); text-align: center; }
.xc-gh-buoc { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.xc-gv { padding: 6px 8px; border-radius: 10px; background: var(--wow-mat-2); }
.xc-gv-bam { cursor: pointer; }
.xc-gv-bam:hover { filter: brightness(1.15); }
.xc-gv-chua, .xc-gv-vuot-tran { opacity: 0.6; }
.xc-gv-ngoai { outline: 1px dashed var(--wow-vien-nhat); }
.xc-gv-xl { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.xc-gv-dau { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.xc-gv-ten { font-family: var(--wow-font-chu); font-size: 12.5px; color: var(--wow-chu-1, #eee); }
.xc-gv-so { font-family: var(--wow-font-so); font-size: 14px; font-weight: 400; color: var(--wow-chu-2); margin-right: 2px; }
.xc-gv-ly { font-family: var(--wow-font-chu); font-size: 11.5px; color: var(--wow-chu-2); line-height: 1.35; overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.xc-gv-hong { color: var(--wow-xau); }
.xc-gv-cho { font-family: var(--wow-font-chu); font-size: 11.5px; color: var(--wow-chu-2); }
.xc-gv-ke-tiep .xc-gv-cho { color: var(--wow-cam-sang); }
.xc-gv-nut { display: flex; flex-wrap: wrap; gap: 6px; }
.xc-gv-them { min-width: 26px; height: 22px; padding: 0 6px; border: 1px solid var(--wow-cam-sang); border-radius: 6px; background: transparent; color: var(--wow-cam-sang);
  font-family: var(--wow-font-so); cursor: pointer; }
.xc-gv-kq { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.xc-gv-ban { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.xc-gv-khung { position: relative; display: block; width: 56px; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 6px; background: #000; }
.xc-gv-khung video { width: 100%; height: 100%; object-fit: cover; display: block; }
.xc-gv-trung { position: absolute; left: 2px; right: 2px; bottom: 2px; display: flex; justify-content: center; }
.xc-gv-tien-ban { font-family: var(--wow-font-so); font-size: 11px; color: var(--wow-chu-2); }
.xc-gv-cp { font-family: var(--wow-font-so); font-size: 13px; color: var(--wow-chu-1, #eee); }
/* [24/10 soát] bảng không giãn quá rộng (tiền sát video của nó) · dòng "Kế tiếp" · dấu đăng góc trên khung · nút xoá nằm trong dòng (không tuyệt đối)
   · ô tiền là nút (bấm ⇒ bảng tiền từng khâu) · hàng chưa có việc gọn · viên "+ barem" ngoài kế hoạch */
.xc-gb { max-width: 1080px; }
.xc-gb-ke { font-family: var(--wow-font-chu); font-size: 12px; color: var(--wow-cam-sang); }
.xc-gv-dang { position: absolute; top: 2px; right: 2px; display: inline-flex; }
.xc-gv-dau .xc-xoa, .xc-gv-nut .xc-xoa { position: static; margin-left: auto; padding: 1px 6px; font-size: 11px; opacity: 0.7; }
.xc-gv-cp { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; }
button.xc-gv-cp { cursor: pointer; }
.xc-gv-cp b { font-family: var(--wow-font-so); font-size: 13px; font-weight: 400; color: var(--wow-chu-1, #eee); }
.xc-gv-cp small { font-family: var(--wow-font-chu); font-size: 10.5px; color: var(--wow-chu-2); }
.xc-gh-cho { grid-template-columns: 44px minmax(0, 1fr); }
.xc-gh-cho .xc-gn-ten { font-size: 10.5px; }
.xc-gh-them { display: flex; flex-wrap: wrap; gap: 6px; }
.xc-gb-con > summary { cursor: pointer; font-family: var(--wow-font-chu); font-size: 12px; color: var(--wow-chu-2); padding: 4px 8px; }
/* khung hẹp: bỏ đầu cột; mỗi dòng bước = xử lý + chi phí trên, kết quả xuống dưới */
@container (max-width: 640px) {
  .xc-gb-cot { display: none; }
  .xc-gh { grid-template-columns: 60px minmax(0, 1fr); gap: 6px; padding: 6px; }
  .xc-gv { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "xl cp" "kq kq"; gap: 4px 8px; padding: 5px 6px; }
  .xc-gv-xl { grid-area: xl; } .xc-gv-kq { grid-area: kq; } .xc-gv-cp { grid-area: cp; }
  .xc-gv-kq:empty { display: none; }
  .xc-gv-khung { width: 46px; }
  .xc-gv-ten { font-size: 11.5px; }
}
/* [24/10] mở màn bằng ?sp= ⇒ màn cuộn tới thẻ mã (scrollIntoView) — đầu thẻ chui dưới thanh đầu cố định (soi ảnh màn sau khi thêm dải thang: tên mã bị che;
   cổng khối-dính-sát bắt khe 1,5px). Cùng mức chừa thanh đầu như khối chip hạ tầng (84px) */
.xc-px-sp { scroll-margin-top: 84px; }

/* [28/10] CEO "máy rất nặng" → "tiếp tục tối ưu": đo RAM thật Xưởng ~550MB trên nền Chrome rỗng, ~40.000 phần tử — thẻ mã xa khung nhìn không cần
   dựng hình. content-visibility bỏ qua bố cục + vẽ thẻ ngoài màn (thẻ vẫn còn, cuộn tới mới vẽ); "auto 420px" = chỗ giữ trước khi vẽ lần đầu,
   vẽ rồi thì nhớ cao thật (cuộn/F5 không nhảy). Thẻ không có menu tràn ra ngoài (popup là dialog lớp trên) nên không bị cắt. */
.xc-px-ds > .xc-px-sp { content-visibility: auto; contain-intrinsic-size: auto 420px; }