/* =====================================================================
   /d · an_pham.css — Thư viện ấn phẩm + phiếu yêu cầu (mig 351 · docs/70 v3 · D298).
   Tiền tố `ap-`. Không hex (L3): màu từ tokens.css; tint bằng color-mix. Khung Danh sách + Khai báo của tab Yêu cầu
   CHÉP từ chiến dịch (mkt.css: .cd-kb · .cd-so · .cd-2cot · .cd-kv · .cd-ht · .cd-bao · .cd-chip · .cd-tip) — ở đây chỉ khai
   phần riêng: triển lãm masonry, phòng xem nền tối, trạng thái ấn phẩm / phiếu, ngăn lý do.
   ===================================================================== */
.ap-trang .sm:not(.btn):not(.input):not(.kpi){font-size:var(--fs-xs)}
.ap-trang .mono{font-family:var(--font-mono);font-size:var(--fs-xs)}

/* ---------------------------------------------------------------- thanh lọc */
.ap-loc{display:flex;flex-direction:column;gap:var(--sp-2)}
.ap-loc .hang{display:flex;gap:var(--sp-2);align-items:center;flex-wrap:wrap}
.ap-loc .hang .sp{flex:1}
.ap-chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.ap-chips .lb{color:var(--faint);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.06em;margin-right:4px}
.ap-chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border-radius:var(--radius-pill);border:1px solid var(--line);
  background:var(--panel);color:var(--muted);font-size:var(--fs-sm);font-weight:500;cursor:pointer;user-select:none;white-space:nowrap}
.ap-chip:hover{border-color:var(--accent);color:var(--accent-text)}
.ap-chip.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.ap-chip .n{font-size:var(--fs-xs);opacity:.75}
.ap-chip[hidden]{display:none}
.ap-tg{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-sm);color:var(--muted);cursor:pointer;user-select:none}
.ap-tg .cnt{display:inline-flex;min-width:20px;height:20px;padding:0 6px;border-radius:var(--radius-pill);background:var(--warn-bg);color:var(--warn);
  font-size:var(--fs-xs);font-weight:600;align-items:center;justify-content:center}

/* ---------------------------------------------------------------- triển lãm: N cột chia bằng JS, thứ tự đọc theo hàng */
.ap-gal{display:flex;gap:14px;align-items:flex-start}
.ap-gal .col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:14px}
.ap-tile{position:relative;border-radius:var(--radius-card);overflow:hidden;background:var(--panel);box-shadow:var(--e1);cursor:pointer;
  transition:box-shadow var(--mo-base) var(--ease-std),transform var(--mo-base) var(--ease-std)}
.ap-tile:hover{box-shadow:var(--e2);transform:translateY(-1px)}
.ap-tile:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ap-tile .art{position:relative;width:100%;overflow:hidden;background:var(--panel-2);transition:transform var(--mo-base) var(--ease-std)}
.ap-tile:hover .art{transform:scale(1.02)}
.ap-tile .art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ap-tile .art .trong{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--faint)}
.ap-tile .art .trong .ic{width:34px;height:34px}
.ap-tile .ov{position:absolute;left:0;right:0;bottom:0;padding:34px 13px 12px;color:var(--media-ink);pointer-events:none;
  background:linear-gradient(to top,var(--media-bg) -45%,var(--media-glass) 45%,transparent 100%);
  opacity:0;transform:translateY(6px);transition:opacity var(--mo-fast) var(--ease-std),transform var(--mo-base) var(--ease-std)}
.ap-tile:hover .ov,.ap-tile:focus-visible .ov{opacity:1;transform:none}
@media (hover:none){.ap-tile .ov{opacity:1;transform:none}}
.ap-tile .ov .t{font-weight:600;font-size:var(--fs-body);line-height:1.3;text-shadow:0 1px 2px var(--media-glass)}
.ap-tile .ov .m{display:flex;align-items:center;gap:8px;margin-top:4px;font-size:var(--fs-xs);color:var(--media-ink-2);flex-wrap:wrap}
.ap-tile .ov .m .ic{width:13px;height:13px}
.ap-badge{position:absolute;top:10px;left:10px;height:22px;padding:0 8px;border-radius:var(--radius-pill);background:var(--media-glass);color:var(--media-ink);
  font-size:var(--fs-xs);font-weight:600;display:inline-flex;align-items:center;gap:5px;backdrop-filter:blur(6px);z-index:1}
.ap-badge .ic{width:12px;height:12px}
.ap-badge.r{left:auto;right:10px}
.ap-badge.r+.ap-badge.r{top:38px}
.ap-badge.st{background:var(--warn-bg);color:var(--warn)}
.ap-badge.st.nhap,.ap-badge.st.mkt,.ap-badge.st.chua_sao{background:var(--panel);color:var(--muted)}
.ap-badge.st.tra_lai,.ap-badge.st.da_thay,.ap-badge.st.het,.ap-badge.st.ngung,.ap-badge.st.hong{background:var(--bad-bg);color:var(--bad)}
.ap-stars{display:inline-flex;gap:1px;color:var(--brand-yellow);letter-spacing:.5px;font-size:12px;line-height:1}
.ap-stars .off{color:var(--media-track)}
.ap-stars.ink .off{color:var(--line)}
.ap-sk{border-radius:var(--radius-card);background:linear-gradient(100deg,var(--panel-2) 30%,var(--panel) 50%,var(--panel-2) 70%);
  background-size:200% 100%;animation:ap-sk 1.2s linear infinite}
@keyframes ap-sk{to{background-position:-200% 0}}

/* ---------------------------------------------------------------- phòng xem (nền tối cố định, nếp trình xem tin Nhịp) */
/* Phòng xem ở lớp --z-sheet: trên khung phiếu (--z-over), DƯỚI hộp xác nhận (--z-modal). Trước 11/10 cùng --z-modal
   nên bấm Nghiệm thu / chấm sao có nhận xét thì hộp xác nhận bị phòng xem che mất. */
.ap-lb{position:fixed;inset:0;background:var(--media-bg);z-index:var(--z-sheet);display:grid;grid-template-columns:1fr 400px;color:var(--media-ink);
  opacity:0;pointer-events:none;transition:opacity var(--mo-base) var(--ease-out)}
.ap-lb.mo{opacity:1;pointer-events:auto}
.ap-lb .stage{position:relative;display:flex;align-items:center;justify-content:center;padding:52px 64px;min-height:0}
.ap-lb .stage .frame{max-width:100%;max-height:100%;border-radius:6px;overflow:hidden;box-shadow:var(--e3);background:var(--panel-2)}
.ap-lb .stage .frame img{display:block;max-width:100%;max-height:calc(100vh - 104px);object-fit:contain}
.ap-lb .stage .frame .trong{width:min(60vw,520px);aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;color:var(--media-ink-2)}
.ap-lb .nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:0;background:var(--media-glass);color:var(--media-ink);
  display:flex;align-items:center;justify-content:center;cursor:pointer}
.ap-lb .nav:hover{background:color-mix(in srgb,var(--media-ink) 18%,transparent)}
.ap-lb .nav.l{left:14px}.ap-lb .nav.r{right:14px}
.ap-lb .nav[disabled]{opacity:.3;cursor:default}
.ap-lb .cls{position:absolute;top:12px;left:14px;height:36px;padding:0 12px;border:0;border-radius:var(--radius-pill);background:var(--media-glass);color:var(--media-ink);
  display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-sm);cursor:pointer}
.ap-lb .cnt{position:absolute;top:20px;right:20px;color:var(--media-ink-2);font-size:var(--fs-sm);font-variant-numeric:tabular-nums}
.ap-lb .side{background:color-mix(in srgb,var(--media-ink) 4%,var(--media-bg));border-left:1px solid color-mix(in srgb,var(--media-ink) 8%,transparent);
  overflow:auto;padding:22px 22px 30px;display:flex;flex-direction:column;gap:16px;min-height:0}
.ap-lb .side h2{margin:0;font-size:17px;font-weight:600;line-height:1.3}
.ap-lb .side .ma{font:500 var(--fs-xs)/1 var(--font-mono);color:var(--media-ink-2);letter-spacing:.06em;margin-bottom:6px}
.ap-lb .k{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.08em;color:color-mix(in srgb,var(--media-ink) 50%,transparent);margin-bottom:6px}
.ap-lb .chipd{display:flex;gap:6px;flex-wrap:wrap}
.ap-lb .chipd span{height:24px;padding:0 9px;border-radius:var(--radius-pill);background:color-mix(in srgb,var(--media-ink) 9%,transparent);color:var(--media-ink);
  font-size:var(--fs-xs);display:inline-flex;align-items:center;gap:5px}
.ap-lb .chipd span.ct{background:color-mix(in srgb,var(--brand-teal) 22%,transparent);color:var(--teal-3)}
.ap-lb .chipd span.dim{opacity:.6}
.ap-lb .rate{display:flex;align-items:center;gap:10px}
.ap-lb .rate .big{display:inline-flex;gap:3px}
.ap-lb .rate .big button{width:30px;height:30px;border:0;background:transparent;color:var(--media-track);font-size:24px;line-height:1;padding:0;cursor:pointer;
  transition:transform var(--mo-fast) var(--ease-std),color var(--mo-fast)}
.ap-lb .rate .big button.on{color:var(--brand-yellow)}
.ap-lb .rate .big button:not([disabled]):hover{transform:scale(1.18)}
.ap-lb .rate .big button[disabled]{cursor:default}
.ap-lb .rate .lbl{font-size:var(--fs-sm);color:var(--media-ink-2)}
.ap-lb .rate .lbl b{color:var(--media-ink);font-weight:600}
.ap-lb .kv{display:grid;grid-template-columns:118px 1fr;gap:6px 10px;font-size:var(--fs-sm)}
.ap-lb .kv dt{color:color-mix(in srgb,var(--media-ink) 50%,transparent);margin:0}
.ap-lb .kv dd{margin:0;color:var(--media-ink);word-break:break-word}
.ap-lb .kv dd a{color:var(--teal-3);text-decoration:none;word-break:break-all}
.ap-lb .kv dd a:hover{text-decoration:underline}
.ap-lb .acts{display:flex;gap:8px;flex-wrap:wrap}
.ap-lb .acts .btn{background:color-mix(in srgb,var(--media-ink) 8%,transparent);border-color:color-mix(in srgb,var(--media-ink) 12%,transparent);color:var(--media-ink)}
.ap-lb .acts .btn:hover{background:color-mix(in srgb,var(--media-ink) 16%,transparent)}
.ap-lb .acts .btn.pri{background:var(--brand-teal);border-color:var(--brand-teal);color:var(--accent-ink)}
.ap-lb .acts .btn.pri:hover{background:var(--teal-4);border-color:var(--teal-4)}
.ap-lb .acts .btn.back{background:color-mix(in srgb,var(--bad-vivid) 20%,transparent);border-color:color-mix(in srgb,var(--bad-vivid) 35%,transparent);
  color:color-mix(in srgb,var(--bad-vivid) 60%,var(--media-ink))}
.ap-lb .nt{background:color-mix(in srgb,var(--brand-yellow) 10%,transparent);border:1px solid color-mix(in srgb,var(--brand-yellow) 25%,transparent);
  border-radius:var(--radius-ctl);padding:9px 11px;font-size:var(--fs-sm);color:var(--brand-yellow)}
.ap-lb .nt.bad{background:color-mix(in srgb,var(--bad-vivid) 12%,transparent);border-color:color-mix(in srgb,var(--bad-vivid) 30%,transparent);
  color:color-mix(in srgb,var(--bad-vivid) 55%,var(--media-ink))}
.ap-ly{display:none;flex-direction:column;gap:8px;background:color-mix(in srgb,var(--media-ink) 6%,transparent);border-radius:var(--radius-ctl);padding:11px}
.ap-ly.mo{display:flex}
.ap-ly .ap-chip{height:24px;font-size:var(--fs-xs);background:transparent;color:var(--media-ink-2);border-color:color-mix(in srgb,var(--media-ink) 18%,transparent)}
.ap-ly .ap-chip.on{background:var(--brand-teal);border-color:var(--brand-teal);color:var(--accent-ink)}
.ap-ly textarea{min-height:56px;border:1px solid color-mix(in srgb,var(--media-ink) 18%,transparent);border-radius:var(--radius-ctl);background:transparent;
  color:var(--media-ink);padding:7px 9px;resize:vertical;font:inherit}
.ap-ly .row{display:flex;gap:8px;justify-content:flex-end}
.ap-lb .log{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px;font-size:var(--fs-xs);color:var(--media-ink-2)}
.ap-lb .log li{display:flex;gap:8px}
.ap-lb .log li .d{color:color-mix(in srgb,var(--media-ink) 40%,transparent);font-variant-numeric:tabular-nums;flex:none;width:84px}
.ap-lb .log li b{color:var(--media-ink);font-weight:500}
.ap-lb .ver{display:flex;gap:8px;align-items:center;font-size:var(--fs-sm);flex-wrap:wrap}
.ap-lb .ver .v{height:24px;padding:0 9px;border-radius:var(--radius-pill);background:color-mix(in srgb,var(--media-ink) 9%,transparent);display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.ap-lb .ver .v.cur{background:color-mix(in srgb,var(--brand-teal) 22%,transparent);color:var(--teal-3)}
.ap-lb .fb{margin-top:auto;padding-top:10px;border-top:1px solid color-mix(in srgb,var(--media-ink) 8%,transparent);display:flex;justify-content:space-between;
  align-items:center;font-size:var(--fs-xs);color:color-mix(in srgb,var(--media-ink) 45%,transparent)}
.ap-lb .fb button{border:0;background:transparent;color:color-mix(in srgb,var(--media-ink) 55%,transparent);text-decoration:underline;font-size:var(--fs-xs);padding:0;cursor:pointer}
@media (max-width:1100px){
  .ap-lb{grid-template-columns:1fr;grid-template-rows:minmax(0,56vh) minmax(0,1fr)}
  .ap-lb .stage{padding:52px 56px 16px}
  .ap-lb .side{border-left:0;border-top:1px solid color-mix(in srgb,var(--media-ink) 8%,transparent)}
}

/* ---------------------------------------------------------------- trạng thái chữ (ấn phẩm · phiếu) */
.ap-st{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-xs);font-weight:500;padding:1px 8px;border-radius:var(--radius-pill);white-space:nowrap}
.ap-st i{width:7px;height:7px;border-radius:50%;background:currentColor}
.ap-st.nhap,.ap-st.huy,.ap-st.tu_choi,.ap-st.da_thay,.ap-st.ngung{color:var(--muted);background:var(--panel-2)}
.ap-st.cho_nghiem_thu,.ap-st.moi{color:var(--warn);background:var(--warn-bg)}
.ap-st.luu_hanh,.ap-st.dang_lam{color:var(--good);background:var(--good-bg)}
.ap-st.dong{color:var(--accent-text);background:var(--accent-weak)}
.ap-st.tra_lai,.ap-st.tre{color:var(--bad);background:var(--bad-bg)}
.ap-den{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.ap-den::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--good-vivid);flex:none}
.ap-den.v::before{background:var(--warn-vivid)}
.ap-den.d::before{background:var(--bad-vivid)}
.ap-den.x::before{background:var(--none-vivid)}
.ap-ds-tbl{min-width:1040px}
.ap-ds-tbl td:nth-child(2){min-width:220px}
.ap-ds-tbl tr.ap-cho-toi>td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
.ap-ds-tbl .ap-act{position:sticky;right:0;background:var(--panel);white-space:nowrap;text-align:right;box-shadow:-6px 0 6px -6px color-mix(in srgb,var(--ink) 30%,transparent)}
.ap-ds-tbl tr:hover .ap-act{background:var(--panel-2)}

/* ---------------------------------------------------------------- khai báo phiếu: tầng 4 ấn phẩm */
.ap-kb-ap{display:flex;gap:10px;flex-wrap:wrap}
.ap-kb-ap .it{width:150px;border:1px solid var(--line);border-radius:var(--radius-ctl);overflow:hidden;background:var(--panel-2);cursor:pointer}
.ap-kb-ap .it .art{position:relative;aspect-ratio:4/3;background:var(--panel-2)}
.ap-kb-ap .it .art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ap-kb-ap .it .c{padding:6px 8px;font-size:var(--fs-xs)}
.ap-kb-ap .it .c b{display:block;font-weight:500;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ap-kb-ap .them{width:150px;min-height:120px;border:1px dashed var(--line);border-radius:var(--radius-ctl);display:flex;align-items:center;justify-content:center;
  color:var(--accent-text);font-weight:500;cursor:pointer;text-align:center;padding:8px}

/* ---------------------------------------------------------------- form: ảnh xem trước */
.ap-thumb{display:grid;grid-template-columns:200px 1fr;gap:14px;align-items:start}
.ap-thumb .box{aspect-ratio:1;border-radius:var(--radius-ctl);background:var(--panel-2);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;color:var(--faint)}
.ap-thumb .box img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ap-thumb .opt{display:flex;flex-direction:column;gap:8px;font-size:var(--fs-sm);color:var(--muted)}
.ap-form .sec{margin-bottom:var(--sp-5)}
.ap-form h4{margin:0 0 10px;font-size:var(--fs-body);display:flex;align-items:center;gap:8px}
.ap-form h4 .so{width:20px;height:20px;border-radius:50%;background:var(--ink);color:var(--panel);font-size:var(--fs-xs);display:inline-flex;align-items:center;justify-content:center}
.ap-form label.f{display:block;font-size:var(--fs-xs);color:var(--muted);margin-bottom:4px}
.ap-form label.f b{color:var(--bad);font-weight:600}
.ap-form .ap-luoi{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px}
.ap-form .ap-luoi .full{grid-column:1/-1}
.ap-form .ap-chan{position:sticky;bottom:calc(-1 * var(--card-pad));background:var(--panel);border-top:1px solid var(--line);
  margin:var(--sp-4) calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad));padding:10px var(--card-pad);display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.ap-thieu{color:var(--bad);font-size:var(--fs-xs)}
.ap-offline{display:none;align-items:center;gap:10px;background:var(--warn-bg);color:var(--warn);border-radius:var(--radius-card);padding:9px 13px;margin-bottom:12px;font-size:var(--fs-sm)}
.ap-offline.mo{display:flex}

/* ---------- D301 (mig 354 · CEO 11/10 tối): ô link nhiều dòng · dán ảnh · tab Đối tác ---------- */
.ap-lk{display:flex;flex-direction:column;gap:6px}
.ap-lk-dong{display:grid;grid-template-columns:auto minmax(0,1.4fr) minmax(0,1fr) auto;gap:6px;align-items:center}
.ap-lk.khong-so .ap-lk-dong{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) auto}
.ap-lk-so{font-size:var(--fs-xs);color:var(--muted);min-width:46px;text-align:center;background:var(--panel-2);border-radius:var(--radius-ctl);padding:5px 6px}
.ap-lk-dong:first-child .ap-lk-so{color:var(--accent-text);background:var(--accent-weak);font-weight:600}
@media (max-width:640px){.ap-lk-dong,.ap-lk.khong-so .ap-lk-dong{grid-template-columns:minmax(0,1fr) auto}.ap-lk-so{display:none}.ap-lk-mt{grid-column:1/2}}
.ap-lk-xem{display:flex;flex-direction:column;margin:0 0 4px}
.ap-lk-xem a{display:inline-flex;gap:6px;align-items:center;overflow-wrap:anywhere}
.ap-lk-xem a .ic{width:13px;height:13px;flex:none}
.ap-lk-xem .u{font-size:var(--fs-xs);opacity:.6;overflow-wrap:anywhere}
.ap-dan-goi{font-size:var(--fs-sm)}
.ap-thumb .box.keo{outline:2px dashed var(--accent);outline-offset:3px}
.ap-st.dang_hop_tac{color:var(--good);background:var(--good-bg)}
.ap-st.tam_dung{color:var(--warn);background:var(--warn-bg)}
.ap-dt-tbl{min-width:1120px}
.ap-dt-tbl td:nth-child(2){min-width:200px}
.ap-dt-so{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
.ap-nl{display:inline-flex;flex-wrap:wrap;gap:4px}
.ap-nl span{font-size:var(--fs-xs);padding:1px 7px;border-radius:999px;background:var(--panel-2);color:var(--muted);white-space:nowrap}
.ap-trang .cd-khoi-t.mt-3{margin-top:var(--sp-4)}            /* .cd-khoi-t (mkt.css) đè .mt-3 — hồ sơ đối tác cần khoảng giữa các nhóm */

/* mig 357 · D304 — phiếu theo biểu mẫu order thiết kế Marcom */
.ap-st.cho_brief{color:var(--muted);background:var(--panel-2);border:1px dashed var(--line)}
.ap-st.tam_dung{color:var(--warn);background:var(--panel-2)}
.ap-luong{display:inline-flex;align-items:center;height:18px;padding:0 6px;border-radius:var(--radius-pill);font-size:var(--fs-xs);font-weight:600;letter-spacing:.3px}
.ap-luong.c{color:var(--accent-text);background:var(--accent-weak)}
.ap-luong.n{color:var(--muted);background:var(--panel-2)}
.ap-gap{display:inline-flex;align-items:center;height:18px;padding:0 6px;border-radius:var(--radius-pill);font-size:var(--fs-xs);font-weight:700;color:var(--bad);background:var(--bad-bg)}
.ap-yc-tbl td{vertical-align:top}
.ap-td .cd-so{margin-bottom:0}
.ap-sla-xem{display:flex;align-items:center;flex-wrap:wrap;gap:4px;height:auto;min-height:36px;color:var(--ink);font-size:var(--fs-sm)}
.ap-sla-tbl td{vertical-align:top}

/* ===================================================================== TAG có màu (mig 372 · docs/70 §15 · D310)
   Màu từng tag do MKT chọn, lưu ở dm_tag_an_pham.mau, đổ vào biến --tag trên từng viên. Nền / viền pha từ --tag nên đọc được cả nền sáng lẫn tối. */
.ap-tag{--tag:var(--accent);display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:var(--radius-pill);
  border:1px solid color-mix(in srgb,var(--tag) 45%,var(--line));background:color-mix(in srgb,var(--tag) 8%,var(--panel));color:var(--ink);
  font:inherit;font-size:var(--fs-sm);line-height:1;cursor:pointer;white-space:nowrap;transition:background var(--mo-fast),border-color var(--mo-fast),opacity var(--mo-fast)}
span.ap-tag{cursor:default}
.ap-tag i{width:9px;height:9px;border-radius:50%;background:var(--tag);flex:none}
.ap-tag:hover{border-color:var(--tag)}
.ap-tag.on{background:color-mix(in srgb,var(--tag) 24%,var(--panel));border-color:var(--tag);box-shadow:inset 0 0 0 1px var(--tag);font-weight:600}
.ap-tag .n{font-size:var(--fs-xs);opacity:.7;font-weight:400}
.ap-tag.zero{opacity:.45}
.ap-tag.tat{border-style:dashed;opacity:.75}
.ap-chip.them{border-style:dashed;color:var(--muted);background:transparent}
.ap-tag-bar .sp{flex:1}
.ap-tag-bar #ap-tag-bo[hidden]{display:none}
/* ô ấn phẩm: chấm màu luôn hiện góc dưới trái; rê chuột thì lớp phủ hiện tên tag */
.ap-tile-tag{position:absolute;left:10px;bottom:10px;display:flex;gap:4px;pointer-events:none;transition:opacity var(--mo-fast)}
.ap-tile-tag i{--tag:var(--accent);width:10px;height:10px;border-radius:50%;background:var(--tag);box-shadow:0 0 0 2px var(--media-glass)}
.ap-tile:hover .ap-tile-tag,.ap-tile:focus-visible .ap-tile-tag{opacity:0}
@media (hover:none){.ap-tile-tag{display:none}}
.ap-tile .ov .tg{display:flex;gap:4px;flex-wrap:wrap;margin-top:6px}
.ap-tile .ov .tg span{--tag:var(--media-glass);height:18px;padding:0 7px;display:inline-flex;align-items:center;border-radius:var(--radius-pill);
  background:color-mix(in srgb,var(--tag) 62%,transparent);color:var(--media-ink);font-size:var(--fs-xs)}
/* phòng xem (nền tối) */
.ap-lb .ap-tag{background:color-mix(in srgb,var(--tag) 24%,transparent);border-color:color-mix(in srgb,var(--tag) 60%,transparent);color:var(--media-ink)}
.ap-lb .ap-tag.on{background:color-mix(in srgb,var(--tag) 50%,transparent);border-color:var(--tag)}
.ap-lb .ap-chip.them{color:var(--media-ink-2);border-color:color-mix(in srgb,var(--media-ink) 24%,transparent)}
.ap-lb .ap-chip.them:hover{color:var(--media-ink);border-color:var(--media-ink-2)}
.ap-lb .ap-tag-chon .ap-mau .o{border-color:var(--media-bg)}
.ap-lb-tag[hidden],.ap-lb-tag-chon[hidden]{display:none}
/* bảng màu */
.ap-mau{display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap}
.ap-mau .o{--tag:var(--accent);width:22px;height:22px;padding:0;border-radius:50%;border:2px solid var(--panel);background:var(--tag);box-shadow:0 0 0 1px var(--line);cursor:pointer}
.ap-mau .o.on,.ap-mau .tu.on{box-shadow:0 0 0 2px var(--ink)}
.ap-mau .tu{position:relative;width:22px;height:22px;border-radius:50%;overflow:hidden;box-shadow:0 0 0 1px var(--line);cursor:pointer;
  background:conic-gradient(var(--c-1),var(--c-2),var(--c-4),var(--c-5),var(--c-3),var(--c-1))}
.ap-mau .tu input{position:absolute;inset:0;width:100%;height:100%;opacity:0;border:0;padding:0;cursor:pointer}
.ap-tag-chon .moi{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px}
.ap-tag-chon .moi[hidden]{display:none}
.ap-tag-chon .moi .input{width:220px;max-width:100%}
/* quản lý tag */
.ap-tag-ql .dong{display:grid;grid-template-columns:28px minmax(0,1fr) auto auto auto;gap:8px;align-items:center;padding:6px 0;border-bottom:1px solid var(--line)}
.ap-tag-ql .dong .pal{grid-column:1/-1;padding:2px 0 4px 36px}
.ap-tag-ql .dong .pal[hidden]{display:none}
.ap-tag-ql .cham{--tag:var(--accent);width:22px;height:22px;padding:0;border:0;border-radius:50%;background:var(--tag);box-shadow:0 0 0 1px var(--line);cursor:pointer}
.ap-tag-ql .dong.tat input[data-ql="ten"],.ap-tag-ql .dong.tat .cham{opacity:.55}