/* ==========================================================================
   BỐ CỤC TRANG QUẢN LÝ v2 (15/10/2026) — cùng ngôn ngữ với Dashboard v2.
   Dùng lại cho mọi trang danh sách: gắn class `pv2` vào .page-content rồi dựng
   .pv2-dau (đầu trang) · .pv2-kpi (số nhanh) · .pv2-cong-cu (tìm + lọc) · .pv2-the (bảng).
   Mọi luật đều nằm dưới `.page-content.pv2` ⇒ trang chưa chuyển không bị đụng.
   Dùng biến --white / --gray-* của admin.css ⇒ giao diện tối tự đổi theo.
   ========================================================================== */
.page-content.pv2 {
  --p-the: var(--white);
  --p-vien: var(--gray-200);
  --p-chu: var(--gray-900);
  --p-mo: var(--gray-500);
  --p-bong: 0 1px 2px rgba(15,23,42,.04), 0 6px 20px -8px rgba(15,23,42,.10);
  --p-bong-ro: 0 2px 4px rgba(15,23,42,.05), 0 16px 36px -14px rgba(79,70,229,.28);
  --p-bo: 16px;
  --p-khe: 16px;
}
[data-theme="dark"] .page-content.pv2 {
  --p-bong: 0 1px 2px rgba(0,0,0,.35), 0 8px 24px -10px rgba(0,0,0,.55);
  --p-bong-ro: 0 2px 4px rgba(0,0,0,.4), 0 18px 40px -14px rgba(99,102,241,.35);
}
@media (prefers-color-scheme: dark) {
  [data-theme="auto"] .page-content.pv2 {
    --p-bong: 0 1px 2px rgba(0,0,0,.35), 0 8px 24px -10px rgba(0,0,0,.55);
    --p-bong-ro: 0 2px 4px rgba(0,0,0,.4), 0 18px 40px -14px rgba(99,102,241,.35);
  }
}

/* ---------- Đầu trang ---------- */
.page-content.pv2 .pv2-dau {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  padding: 22px 26px; margin-bottom: var(--p-khe); border-radius: 20px; color: #fff;
  background:
    radial-gradient(600px 220px at 100% 0%, rgba(236,72,153,.32), transparent 60%),
    radial-gradient(500px 240px at 0% 100%, rgba(56,189,248,.26), transparent 60%),
    linear-gradient(120deg, #4f46e5 0%, #6366f1 45%, #8b5cf6 100%);
  box-shadow: 0 18px 40px -18px rgba(79,70,229,.65);
}
.page-content.pv2 .pv2-dau::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .14;
  background-image: linear-gradient(rgba(255,255,255,.5) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.5) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 55%, #000 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 55%, #000 100%);
}
.page-content.pv2 .pv2-dau > * { position: relative; z-index: 1; }
.page-content.pv2 .pv2-dau-trai { min-width: 0; flex: 1 1 320px; }
.page-content.pv2 .pv2-nhan {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 999px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.22);
}
.page-content.pv2 .pv2-tieu-de {
  font-size: clamp(1.25rem, 2.2vw, 1.7rem); font-weight: 800; letter-spacing: -.02em;
  margin: 10px 0 4px; color: #fff; line-height: 1.25;
}
.page-content.pv2 .pv2-phu-de { margin: 0; font-size: .85rem; color: rgba(255,255,255,.85); max-width: 640px; line-height: 1.5; }
.page-content.pv2 .pv2-dau-phai { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.page-content.pv2 .pv2-nut-chinh {
  display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 18px; border-radius: 12px;
  background: #fff; color: #4f46e5; border: 0; font-weight: 800; font-size: .85rem;
  box-shadow: 0 10px 24px -10px rgba(15,23,42,.45);
  transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s ease, background .18s ease;
}
.page-content.pv2 .pv2-nut-chinh:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -10px rgba(15,23,42,.55); background: #f5f3ff; }
.page-content.pv2 .pv2-nut-chinh:active { transform: translateY(0) scale(.98); }
.page-content.pv2 .pv2-nut-chinh:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(255,255,255,.55); }
.page-content.pv2 .pv2-nut-chinh:disabled { opacity: .55; cursor: not-allowed; transform: none; }

/* ---------- Số liệu nhanh ---------- */
.page-content.pv2 .pv2-kpi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: var(--p-khe); }
.page-content.pv2 .pv2-kpi-o {
  --ac: #6366f1; --ac2: #8b5cf6;
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px;
  background: var(--p-the); border: 1px solid var(--p-vien); box-shadow: var(--p-bong);
  transition: transform .18s ease, box-shadow .18s ease;
}
.page-content.pv2 .pv2-kpi-o::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--ac), var(--ac2)); }
.page-content.pv2 .pv2-kpi-o:hover { transform: translateY(-2px); box-shadow: var(--p-bong-ro); }
.page-content.pv2 .pv2-kpi-i {
  width: 40px; height: 40px; border-radius: 12px; flex: none;
  display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; color: #fff;
  background: linear-gradient(135deg, var(--ac), var(--ac2)); box-shadow: 0 8px 18px -8px var(--ac);
}
.page-content.pv2 .pv2-kpi-o b { display: block; font-size: 1.45rem; font-weight: 800; letter-spacing: -.02em; color: var(--p-chu); line-height: 1.15; font-variant-numeric: tabular-nums; }
.page-content.pv2 .pv2-kpi-o small { display: block; font-size: .74rem; font-weight: 700; color: var(--p-mo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.page-content.pv2 .pv2-tim  { --ac: #6366f1; --ac2: #8b5cf6; }
.page-content.pv2 .pv2-xanh { --ac: #10b981; --ac2: #14b8a6; }
.page-content.pv2 .pv2-troi { --ac: #0ea5e9; --ac2: #6366f1; }
.page-content.pv2 .pv2-vang { --ac: #f59e0b; --ac2: #f97316; }
.page-content.pv2 .pv2-do   { --ac: #ef4444; --ac2: #f97316; }

/* ---------- Thanh công cụ ---------- */
.page-content.pv2 .pv2-cong-cu {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 0 var(--p-khe); padding: 10px; border-radius: 14px;
  background: var(--p-the); border: 1px solid var(--p-vien); box-shadow: var(--p-bong);
}
.page-content.pv2 .pv2-tim-kiem { flex: 1 1 260px; min-width: 0; }
.page-content.pv2 .pv2-tim-kiem input {
  height: 40px; border: 1.5px solid var(--p-vien); border-radius: 10px; background: var(--p-the); color: var(--p-chu);
  font-size: .85rem; transition: border-color .15s ease, box-shadow .15s ease;
}
.page-content.pv2 .pv2-tim-kiem input:focus { outline: 0; border-color: #818cf8; box-shadow: 0 0 0 3px rgba(99,102,241,.14); }
.page-content.pv2 .pv2-loc { display: inline-flex; gap: 2px; padding: 4px; border-radius: 12px; background: var(--gray-100); }
.page-content.pv2 .pv2-loc-nut {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border: 0; border-radius: 9px;
  background: transparent; color: var(--gray-600); font-size: .78rem; font-weight: 700; cursor: pointer; white-space: nowrap;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.page-content.pv2 .pv2-loc-nut span {
  min-width: 20px; height: 18px; padding: 0 6px; border-radius: 999px; font-size: .66rem; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center; background: var(--gray-200); color: var(--gray-700);
}
.page-content.pv2 .pv2-loc-nut span:empty { display: none; }
.page-content.pv2 .pv2-loc-nut:hover { color: var(--p-chu); }
.page-content.pv2 .pv2-loc-nut:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(99,102,241,.25); }
.page-content.pv2 .pv2-loc-nut.active { background: var(--p-the); color: #4f46e5; box-shadow: 0 1px 3px rgba(15,23,42,.12); }
.page-content.pv2 .pv2-loc-nut.active span { background: rgba(99,102,241,.14); color: #4f46e5; }
[data-theme="dark"] .page-content.pv2 .pv2-loc-nut.active { color: #a5b4fc; }
[data-theme="dark"] .page-content.pv2 .pv2-loc-nut.active span { color: #c7d2fe; }

/* ---------- Bảng ---------- */
.page-content.pv2 .pv2-the {
  border-radius: var(--p-bo); background: var(--p-the); border: 1px solid var(--p-vien); box-shadow: var(--p-bong);
}
.page-content.pv2 .pv2-bang { border-collapse: separate; border-spacing: 0; width: 100%; }
.page-content.pv2 .pv2-bang thead th {
  padding: 12px 14px; font-size: .68rem; font-weight: 800; letter-spacing: .06em; color: var(--p-mo);
  background: var(--gray-50); border-bottom: 1px solid var(--p-vien);
}
.page-content.pv2 .pv2-bang tbody td { padding: 12px 14px; border-bottom: 1px solid var(--gray-100); vertical-align: middle; color: var(--gray-700); font-size: .84rem; }
.page-content.pv2 .pv2-bang tbody tr:last-child td { border-bottom: 0; }
.page-content.pv2 .pv2-bang tbody tr { transition: background .15s ease; }
.page-content.pv2 .pv2-bang tbody tr:hover td { background: rgba(99,102,241,.045); }
@media (min-width: 768px) {
  .page-content.pv2 .pv2-bang tbody tr:hover td:last-child:not([colspan]) { background: linear-gradient(rgba(99,102,241,.045), rgba(99,102,241,.045)), var(--white, #fff); }
}
.page-content.pv2 .pv2-bang .pv2-so { text-align: right; font-variant-numeric: tabular-nums; }
.page-content.pv2 .pv2-bang .pv2-tt { text-align: right; }
.page-content.pv2 .pv2-stt { color: var(--gray-400); font-weight: 700; font-variant-numeric: tabular-nums; }

/* Ô tên có logo / chữ cái đầu */
.page-content.pv2 .pv2-ten { display: flex; align-items: center; gap: 12px; min-width: 0; }
.page-content.pv2 .pv2-logo {
  width: 40px; height: 40px; border-radius: 12px; flex: none; object-fit: cover;
  background: var(--gray-100); border: 1px solid var(--p-vien);
}
.page-content.pv2 .pv2-logo-chu {
  width: 40px; height: 40px; border-radius: 12px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .82rem; font-weight: 800; letter-spacing: .02em; color: #fff;
  background: linear-gradient(135deg, hsl(var(--h,245) 75% 60%), hsl(calc(var(--h,245) + 40) 75% 55%));
}
.page-content.pv2 .pv2-ten-chu { min-width: 0; display: flex; flex-direction: column; }
.page-content.pv2 .pv2-ten-chu b { font-weight: 700; color: var(--p-chu); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.page-content.pv2 .pv2-ten-chu small { font-size: .72rem; color: var(--p-mo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 360px; }
.page-content.pv2 .pv2-ma {
  display: inline-block; padding: 3px 9px; border-radius: 8px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .74rem; color: var(--gray-700); background: var(--gray-100); border: 1px solid var(--p-vien);
}
.page-content.pv2 .pv2-dem { font-weight: 800; color: var(--p-chu); }
.page-content.pv2 .pv2-dem.khong { color: var(--gray-400); font-weight: 600; }

/* Trạng thái: chấm + chữ (không chỉ màu) */
.page-content.pv2 .pv2-tt-nhan {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
  font-size: .72rem; font-weight: 800; white-space: nowrap;
}
.page-content.pv2 .pv2-tt-nhan::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.page-content.pv2 .pv2-tt-nhan.bat { color: #059669; background: rgba(16,185,129,.12); }
.page-content.pv2 .pv2-tt-nhan.tat { color: #dc2626; background: rgba(239,68,68,.10); }
[data-theme="dark"] .page-content.pv2 .pv2-tt-nhan.bat { color: #34d399; }
[data-theme="dark"] .page-content.pv2 .pv2-tt-nhan.tat { color: #f87171; }

/* Nút thao tác */
.page-content.pv2 .pv2-nut-dong { display: inline-flex; gap: 6px; justify-content: flex-end; }
.page-content.pv2 .pv2-nut-i {
  width: 34px; height: 34px; border-radius: 10px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; font-size: .82rem; cursor: pointer;
  background: var(--p-the); color: var(--gray-600); border: 1px solid var(--p-vien);
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.page-content.pv2 .pv2-nut-i:hover { color: #4f46e5; border-color: rgba(99,102,241,.4); background: rgba(99,102,241,.08); transform: translateY(-1px); }
.page-content.pv2 .pv2-nut-i.xoa:hover { color: #dc2626; border-color: rgba(239,68,68,.4); background: rgba(239,68,68,.08); }
.page-content.pv2 .pv2-nut-i:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(99,102,241,.25); }
.page-content.pv2 .pv2-nut-i:disabled { opacity: .55; cursor: not-allowed; transform: none; }

/* Trống / không khớp */
.page-content.pv2 .pv2-trong { padding: 40px 16px; text-align: center; color: var(--p-mo); }
.page-content.pv2 .pv2-trong > i { font-size: 2rem; color: var(--gray-300); margin-bottom: 10px; display: block; }
.page-content.pv2 .pv2-trong b { display: block; color: var(--p-chu); font-size: .95rem; margin-bottom: 4px; }
.page-content.pv2 .pv2-trong button { margin-top: 12px; }

/* ---------- Tablet ---------- */
@media (max-width: 1023px) {
  .page-content.pv2 { --p-khe: 14px; }
  .page-content.pv2 .pv2-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-content.pv2 .pv2-dau { padding: 18px 20px; }
}
/* ---------- Mobile: bảng thành thẻ ---------- */
@media (max-width: 767px) {
  .page-content.pv2 { --p-khe: 12px; }
  .page-content.pv2 .pv2-dau { padding: 16px; border-radius: 16px; }
  .page-content.pv2 .pv2-dau-phai, .page-content.pv2 .pv2-nut-chinh { width: 100%; justify-content: center; }
  /* admin.css ≤768px đặt .filter-bar thành CỘT ⇒ flex-basis 260px của ô tìm biến thành CHIỀU CAO */
  .page-content.pv2 .pv2-cong-cu { flex-direction: column; align-items: stretch; gap: 10px; }
  .page-content.pv2 .pv2-tim-kiem { flex: none; width: 100%; min-width: 0; }
  .page-content.pv2 .pv2-tim-kiem input { width: 100%; }
  .page-content.pv2 .pv2-loc { width: 100%; }
  .page-content.pv2 .pv2-loc-nut { flex: 1 1 0; justify-content: center; min-height: 36px; }
  .page-content.pv2 .pv2-the { background: transparent; border: 0; box-shadow: none; overflow: visible; }
  .page-content.pv2 .pv2-bang thead { display: none; }
  /* admin.css ép .data-table min-width 600px trên điện thoại (cho cuộn ngang) — dạng thẻ thì không cần */
  .page-content.pv2 .pv2-bang, .page-content.pv2 .pv2-bang tbody { display: block; min-width: 0 !important; width: 100% !important; }
  .page-content.pv2 .pv2-bang td.pv2-o-nut { position: static; background: transparent; }
  .page-content.pv2 .pv2-bang td.pv2-o-nut::before { display: none; }
  .page-content.pv2 .pv2-bang tbody tr {
    display: grid; grid-template-columns: 1fr auto; gap: 8px 10px; align-items: center;
    padding: 12px 14px; margin-bottom: 10px; border-radius: 14px;
    background: var(--p-the); border: 1px solid var(--p-vien); box-shadow: var(--p-bong);
  }
  .page-content.pv2 .pv2-bang tbody td { display: block; padding: 0; border: 0; white-space: normal; }
  .page-content.pv2 .pv2-bang tbody tr:hover td { background: transparent; }
  .page-content.pv2 .pv2-bang td.pv2-stt { display: none; }
  .page-content.pv2 .pv2-bang td[data-nhan] { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; font-size: .8rem; }
  .page-content.pv2 .pv2-bang td[data-nhan]::before { content: attr(data-nhan); color: var(--p-mo); font-size: .74rem; font-weight: 700; }
  .page-content.pv2 .pv2-bang td.pv2-o-ten { grid-column: 1; }
  .page-content.pv2 .pv2-bang td.pv2-o-tt { grid-column: 2; grid-row: 1; }
  .page-content.pv2 .pv2-bang td.pv2-o-nut { grid-column: 1 / -1; padding-top: 6px; border-top: 1px solid var(--gray-100); }
  .page-content.pv2 .pv2-bang td.pv2-o-nut .pv2-nut-dong { width: 100%; }
  .page-content.pv2 .pv2-bang td.pv2-o-nut .pv2-nut-i { flex: 1 1 0; height: 38px; }
  .page-content.pv2 .pv2-bang td.pv2-trong-o { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  /* admin.css ≤480px ẩn .btn span — nút chính của trang vẫn phải có chữ */
  .page-content.pv2 .pv2-nut-chinh span { display: inline !important; }
  .page-content.pv2 .pv2-phu-de { font-size: .78rem; }
  .page-content.pv2 .pv2-kpi { gap: 8px; }
  .page-content.pv2 .pv2-kpi-o { padding: 10px 12px; gap: 10px; }
  .page-content.pv2 .pv2-kpi-i { width: 32px; height: 32px; font-size: .82rem; border-radius: 10px; }
  .page-content.pv2 .pv2-kpi-o b { font-size: 1.15rem; }
  .page-content.pv2 .pv2-kpi-o small { font-size: .66rem; }
  .page-content.pv2 .pv2-ten-chu small { max-width: 180px; }
}
@media (prefers-reduced-motion: reduce) {
  .page-content.pv2 *, .page-content.pv2 *::before { transition: none !important; }
}
/* Nút thao tác ở giao diện tối — luật nút chung của admin.css (dark) xoá nền/viền */
[data-theme="dark"] .page-content.pv2 .pv2-nut-i { background: var(--gray-100) !important; border: 1px solid var(--gray-300) !important; color: var(--gray-700) !important; }
[data-theme="dark"] .page-content.pv2 .pv2-nut-i:hover { color: #a5b4fc !important; border-color: rgba(129,140,248,.5) !important; }
[data-theme="dark"] .page-content.pv2 .pv2-nut-i.xoa:hover { color: #f87171 !important; border-color: rgba(248,113,113,.5) !important; }

/* ==========================================================================
   DA ĐẦU TRANG DÙNG CHUNG (.pv2-skin) — trangV2.js gắn vào phần đầu trang có sẵn
   của từng trang (.page-header · .webhooks-info-banner · đầu trang module) hoặc
   khối chèn .pv2-dau-chen. ⚠ KHÔNG đặt position ở đây: .page-header đang sticky.
   ========================================================================== */
.page-content.pv2 .pv2-skin {
  --sk-nen:
    radial-gradient(600px 220px at 100% 0%, rgba(236,72,153,.32), transparent 60%),
    radial-gradient(500px 240px at 0% 100%, rgba(56,189,248,.26), transparent 60%),
    linear-gradient(120deg, #4f46e5 0%, #6366f1 45%, #8b5cf6 100%);
  /* Lưới caro như đầu trang Thương hiệu/Dashboard — vẽ thẳng trong NỀN (không dùng ::after
     vì cần position, mà .page-header đang sticky và đầu trang module có menu thả xuống).
     Lớp mờ dần từ trái che lưới ở phía chữ, giống mask của bản ::after. */
  background:
    radial-gradient(600px 220px at 100% 0%, rgba(236,72,153,.32), transparent 60%),
    radial-gradient(500px 240px at 0% 100%, rgba(56,189,248,.26), transparent 60%),
    linear-gradient(90deg, #4f46e5 0%, rgba(84,76,232,.92) 22%, rgba(99,102,241,0) 58%),
    linear-gradient(rgba(255,255,255,.075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.075) 1px, transparent 1px),
    linear-gradient(120deg, #4f46e5 0%, #6366f1 45%, #8b5cf6 100%) !important;
  background-size: auto, auto, auto, 28px 28px, 28px 28px, auto !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 20px !important;
  box-shadow: 0 18px 40px -18px rgba(79,70,229,.65) !important;
  padding: 18px 22px !important;
}
.page-content.pv2 .pv2-skin :is(h1, h2, h3, h4) {
  color: #fff !important; -webkit-text-fill-color: #fff !important; background: none !important;
  letter-spacing: -.02em;
}
.page-content.pv2 .pv2-skin :is(h1, h2) { font-weight: 800 !important; }
.page-content.pv2 .pv2-skin :is(p, small):not(:is([class*="menu"], [class*="dropdown"], [class*="pop"], [class*="panel"], [role="menu"], [role="dialog"]) *) { color: rgba(255,255,255,.86) !important; }
.page-content.pv2 .pv2-skin :is(h1, h2, h3, h4) i,
.page-content.pv2 .pv2-skin :is(h1, h2, h3, h4) svg { color: #fff !important; fill: currentColor; }
/* Nút: kính mờ; nút chính (trangV2.js dò nền đậm) ⇒ trắng chữ tím */
.page-content.pv2 .pv2-skin :is(button, .btn, a.btn):not(:is([class*="menu"], [class*="dropdown"], [class*="pop"], [class*="panel"], [role="menu"], [role="dialog"]) *) {
  background: rgba(255,255,255,.14) !important; color: #fff !important;
  border: 1px solid rgba(255,255,255,.3) !important; box-shadow: none !important;
  -webkit-text-fill-color: #fff !important;
  transition: background .15s ease, transform .15s ease !important;
}
.page-content.pv2 .pv2-skin :is(button, .btn, a.btn):not(:is([class*="menu"], [class*="dropdown"], [class*="pop"], [class*="panel"], [role="menu"], [role="dialog"]) *) :is(i, span, svg) { color: inherit !important; -webkit-text-fill-color: inherit !important; }
.page-content.pv2 .pv2-skin :is(button, .btn, a.btn):not(:is([class*="menu"], [class*="dropdown"], [class*="pop"], [class*="panel"], [role="menu"], [role="dialog"]) *):hover { background: rgba(255,255,255,.24) !important; transform: translateY(-1px); }
.page-content.pv2 .pv2-skin :is(button, .btn, a.btn):not(:is([class*="menu"], [class*="dropdown"], [class*="pop"], [class*="panel"], [role="menu"], [role="dialog"]) *):focus-visible { outline: 0 !important; box-shadow: 0 0 0 3px rgba(255,255,255,.5) !important; }
.page-content.pv2 .pv2-skin :is(button, .btn, a.btn):not(:is([class*="menu"], [class*="dropdown"], [class*="pop"], [class*="panel"], [role="menu"], [role="dialog"]) *):disabled { opacity: .55; transform: none; }
.page-content.pv2 .pv2-skin :is(button, .btn, a.btn):not(:is([class*="menu"], [class*="dropdown"], [class*="pop"], [class*="panel"], [role="menu"], [role="dialog"]) *).pv2-chinh {
  background: #fff !important; color: #4f46e5 !important; -webkit-text-fill-color: #4f46e5 !important;
  border-color: #fff !important; font-weight: 800 !important; box-shadow: 0 10px 22px -10px rgba(15,23,42,.45) !important;
}
.page-content.pv2 .pv2-skin :is(button, .btn, a.btn):not(:is([class*="menu"], [class*="dropdown"], [class*="pop"], [class*="panel"], [role="menu"], [role="dialog"]) *).pv2-chinh:hover { background: #f5f3ff !important; }
/* (17/10) Nút "Công cụ" của Lịch phát sóng nằm TRONG .schedule-actions-menu ⇒ luật da ở trên bỏ qua nó (loại trừ con của [class*="menu"])
   ⇒ giữ gradient tím gốc ⇒ CHÌM vào nền tím của đầu trang, chỉ nổi khi đang mở. Nay là nút kính rõ viền, mở ra thì trắng. */
.page-content.pv2 .pv2-skin .schedule-menu-trigger {
  background: rgba(255,255,255,.2) !important; color: #fff !important; -webkit-text-fill-color: #fff !important;
  border: 1px solid rgba(255,255,255,.6) !important; font-weight: 700 !important; filter: none !important;
  box-shadow: 0 8px 20px -12px rgba(15,23,42,.55), inset 0 1px 0 rgba(255,255,255,.3) !important;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.page-content.pv2 .pv2-skin .schedule-menu-trigger :is(i, span) { color: inherit !important; -webkit-text-fill-color: inherit !important; }
.page-content.pv2 .pv2-skin .schedule-menu-trigger:hover { background: rgba(255,255,255,.32) !important; transform: translateY(-1px); }
/* (19/10) Tổng hợp lịch: cụm ‹ ngày › là MỘT khối nền trắng ⇒ nút mũi tên phải chữ tím trên nền trắng
   (luật "kính mờ chữ trắng" ở trên làm 2 nút chìm hẳn vào nền ô ngày). */
.page-content.pv2 .pv2-skin .so-tb-nav { background: rgba(255,255,255,.97) !important; border-color: transparent !important; box-shadow: 0 1px 2px rgba(15,23,42,.12); }
.page-content.pv2 .pv2-skin .so-tb-nav .so-tb-arrow.so-tb-arrow {
  background: transparent !important; border: 0 !important; color: #4f46e5 !important; -webkit-text-fill-color: #4f46e5 !important;
  width: 34px; font-size: .8rem; transform: none !important;
}
.page-content.pv2 .pv2-skin .so-tb-nav .so-tb-arrow.so-tb-arrow:hover { background: #eef2ff !important; color: #4338ca !important; -webkit-text-fill-color: #4338ca !important; }
.page-content.pv2 .pv2-skin .so-tb-nav .so-tb-arrow.so-tb-arrow:active { background: #e0e7ff !important; }
.page-content.pv2 .pv2-skin .so-tb-nav .so-tb-arrow.so-tb-arrow:focus-visible { box-shadow: inset 0 0 0 2px #818cf8 !important; }
.page-content.pv2 .pv2-skin .so-tb-nav .so-tb-date { border-left: 1px solid #e2e8f0 !important; border-right: 1px solid #e2e8f0 !important; border-radius: 0 !important; background: transparent !important; }
[data-theme="dark"] .page-content.pv2 .pv2-skin .so-tb-nav { background: #0f172a !important; }
[data-theme="dark"] .page-content.pv2 .pv2-skin .so-tb-nav .so-tb-arrow.so-tb-arrow { color: #a5b4fc !important; -webkit-text-fill-color: #a5b4fc !important; }
[data-theme="dark"] .page-content.pv2 .pv2-skin .so-tb-nav .so-tb-arrow.so-tb-arrow:hover { background: #1e293b !important; }
[data-theme="dark"] .page-content.pv2 .pv2-skin .so-tb-nav .so-tb-date { color: #e2e8f0 !important; -webkit-text-fill-color: #e2e8f0 !important; border-color: #334155 !important; }
.page-content.pv2 .pv2-skin .schedule-menu-trigger.active { background: #fff !important; color: #4f46e5 !important; -webkit-text-fill-color: #4f46e5 !important; border-color: #fff !important; }
.page-content.pv2 .pv2-skin .schedule-menu-trigger:focus-visible { outline: 0 !important; box-shadow: 0 0 0 3px rgba(255,255,255,.55) !important; }
/* Huy hiệu số nhóm Keep Live trên nút: vàng sáng chữ nâu đậm (trước: cam trên nền tím, chữ bị màu đầu trang đè ⇒ chìm) */
.page-content.pv2 .pv2-skin .schedule-menu-trigger .keep-live-badge {
  background: linear-gradient(135deg, #fde047, #f59e0b) !important; color: #78350f !important; -webkit-text-fill-color: #78350f !important;
  border: 2px solid #fff !important; font-weight: 800 !important; font-size: .66rem !important; min-width: 22px !important; height: 20px !important;
  box-shadow: 0 4px 12px -2px rgba(120,53,15,.55) !important;
}
.page-content.pv2 .pv2-skin .schedule-menu-trigger .keep-live-badge i { color: #78350f !important; -webkit-text-fill-color: #78350f !important; }
/* Ô nhập / chọn trong đầu trang: nền trắng chữ tối cho dễ đọc */
.page-content.pv2 .pv2-skin :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) {
  background-color: rgba(255,255,255,.96) !important; color: #0f172a !important; -webkit-text-fill-color: #0f172a !important;
  border-color: transparent !important;
}
.page-content.pv2 .pv2-skin :is(input, textarea)::placeholder { color: #64748b !important; -webkit-text-fill-color: #64748b !important; }
.page-content.pv2 .pv2-skin label { color: rgba(255,255,255,.9); }

/* Nhãn nhóm + mô tả do trangV2.js thêm */
.page-content.pv2 .pv2-skin .pv2-nhan {
  display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
  font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #fff;
  padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.22);
  margin-bottom: 6px; white-space: nowrap;
}
.page-content.pv2 .pv2-skin .pv2-nhan i { color: #fff !important; font-size: .7rem; }
.page-content.pv2 .pv2-khoi-tt { display: flex; flex-direction: column; min-width: 0; flex: 1 1 280px; }
.page-content.pv2 .pv2-skin .pv2-khoi-tt .page-title,
.page-content.pv2 .pv2-skin .pv2-tieu-de { margin: 0; font-size: clamp(1.2rem, 2vw, 1.55rem) !important; line-height: 1.25; }
.page-content.pv2 .pv2-skin .pv2-tieu-de i { margin-right: 6px; opacity: .95; }
.page-content.pv2 .pv2-skin .pv2-phu-de { margin: 4px 0 0; font-size: .83rem; line-height: 1.5; max-width: 760px; }

/* Đầu trang TĨNH (.page-header) — giữ dính khi cuộn, thu gọn lúc đã cuộn */
.page-content.pv2 > .page-header.pv2-skin {
  margin-left: 0 !important; margin-right: 0 !important; margin-bottom: var(--p-khe) !important;
  align-items: center; gap: 14px;
  /* phủ khe trên đầu khi dính để nội dung trôi qua không lòi ra sau góc bo */
  box-shadow: 0 -14px 0 0 var(--th-bg, #f1f5f9), 0 18px 40px -18px rgba(79,70,229,.65) !important;
  /* KHÔNG transition chiều cao: đổi cao dần từng khung làm trình duyệt chỉnh scroll liên tục ⇒ giật */
}
.page-content.pv2 > .page-header.pv2-skin .page-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
html.pv2-cuon .page-content.pv2 > .page-header.pv2-skin { padding: 10px 18px !important; border-radius: 0 0 16px 16px !important; }
html.pv2-cuon .page-content.pv2 > .page-header.pv2-skin .pv2-gan { display: none; }
html.pv2-cuon .page-content.pv2 > .page-header.pv2-skin .page-title { font-size: 1.1rem !important; }

/* Biểu ngữ webhooks-info-banner */
.page-content.pv2 .pv2-skin-bn { margin-bottom: var(--p-khe) !important; }
.page-content.pv2 .pv2-skin-bn .webhooks-info-icon {
  background: rgba(255,255,255,.18) !important; color: #fff !important; box-shadow: none !important;
  border: 1px solid rgba(255,255,255,.25);
}
.page-content.pv2 .pv2-skin-bn .webhooks-info-icon i { color: #fff !important; }
.page-content.pv2 .pv2-skin-bn :is(.webhooks-info-content, .webhooks-info-content *) { color: rgba(255,255,255,.9) !important; }
.page-content.pv2 .pv2-skin-bn .webhooks-info-content :is(strong, b, a, code) { color: #fff !important; }
.page-content.pv2 .pv2-skin-bn .webhooks-info-content code { background: rgba(255,255,255,.16) !important; border-color: transparent !important; }
.page-content.pv2 .pv2-skin-bn .webhooks-info-content { display: flex; flex-direction: column; }

/* Khối chèn cho trang chưa có đầu trang */
.page-content.pv2 > .pv2-dau-chen { display: flex; align-items: center; margin-bottom: var(--p-khe); }

/* Đầu trang module: chữ phụ thường là div/span màu xám ⇒ cho kế thừa trắng */
.page-content.pv2 .pv2-skin-mod :is(.lxl-title, .lcx-tt, .lk-tt, .nt-top-l, .nt-ttl, .tip-dau-t, .sw-rec-hero-tx, .swx-top-t, .tdk-page-header > div:first-child, .sc-topbar > div:first-child, .qa-head > div:first-child, .sa-head > div:first-child) :is(div, span, p, small):not([class*="chip"]):not([class*="tag"]):not([class*="pill"]):not([class*="badge"]) {
  color: rgba(255,255,255,.86) !important;
}

/* ---------- Thanh lọc + thẻ + bảng CHUẨN của các trang tĩnh ---------- */
.page-content.pv2 > .filter-bar {
  border-radius: 14px; background: var(--p-the); border: 1px solid var(--p-vien); box-shadow: var(--p-bong); padding: 10px;
}
.page-content.pv2 > .filter-bar .search-box input {
  height: 40px; border: 1.5px solid var(--p-vien); border-radius: 10px; font-size: .85rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.page-content.pv2 > .filter-bar .search-box input:focus { outline: 0; border-color: #818cf8; box-shadow: 0 0 0 3px rgba(99,102,241,.14); }
.page-content.pv2 > .filter-bar select { min-height: 40px; border-radius: 10px; border: 1.5px solid var(--p-vien); }
.page-content.pv2 > .data-card { border-radius: var(--p-bo); border: 1px solid var(--p-vien); box-shadow: var(--p-bong); }
.page-content.pv2 > .data-card .data-table thead th {
  padding: 12px 14px; font-size: .68rem; font-weight: 800; letter-spacing: .06em; color: var(--p-mo);
  background: var(--gray-50); border-bottom: 1px solid var(--p-vien);
}
.page-content.pv2 > .data-card .data-table tbody td { padding: 11px 14px; border-bottom: 1px solid var(--gray-100); vertical-align: middle; }
.page-content.pv2 > .data-card .data-table tbody tr { transition: background .15s ease; }
.page-content.pv2 > .data-card .data-table tbody tr:hover td { background: rgba(99,102,241,.045); }
/* (16/10) Cột THAO TÁC dính phải (position:sticky) phải giữ NỀN ĐẶC khi rê chuột — nền rgba ở trên làm ô trong suốt
   ⇒ chữ của cột đang cuộn bên dưới lộ ra sau các nút (user báo: thấy "…IX" cạnh nút lịch sử). Phủ lớp màu hover LÊN nền đặc. */
.page-content.pv2 > .data-card .data-table tbody tr:hover td:last-child:not([colspan]) {
  background: linear-gradient(rgba(99,102,241,.045), rgba(99,102,241,.045)), var(--white, #fff);
}

/* (21/10) 768px: admin.css đã chuyển .page-header thành CỘT ở ≤768px ⇒ khối này phải áp cả 768 (iPad dọc từng cao 425px) */
@media (max-width: 768px) {
  .page-content.pv2 .pv2-skin { padding: 14px 16px !important; border-radius: 16px !important; }
  .page-content.pv2 > .page-header.pv2-skin { align-items: stretch; }
  /* admin.css ≤768px đặt .page-header thành CỘT ⇒ flex-basis 280px của khối tiêu đề thành CHIỀU CAO */
  .page-content.pv2 .pv2-khoi-tt { flex: none; width: 100%; min-width: 0; }
  .page-content.pv2 > .pv2-dau-chen { max-width: 100%; overflow: hidden; }
  .page-content.pv2 > .page-header.pv2-skin .page-actions { width: 100%; }
  .page-content.pv2 .pv2-skin .pv2-phu-de { font-size: .76rem; }
  html.pv2-cuon .page-content.pv2 > .page-header.pv2-skin .page-actions { display: none; }
}

/* Nhóm nút dạng segmented trong đầu trang (vd Sổ ghi chú: Tài liệu / Lịch / Bảng việc) */
.page-content.pv2 .pv2-skin :is([role="group"], [role="tablist"], [class*="-sw"]:not(.pv2-skin), [class*="seg"]) {
  background: rgba(255,255,255,.14) !important; border-color: rgba(255,255,255,.22) !important; box-shadow: none !important;
}
.page-content.pv2 .pv2-skin.pv2-skin :is([role="group"], [role="tablist"], [class*="-sw"], [class*="seg"]) > :is(button, .btn, a.btn, a) {
  border-color: transparent !important; background: transparent !important;
}
.page-content.pv2 .pv2-skin.pv2-skin.pv2-skin :is(button, .btn, a.btn, a):is(.is-on, .active, .on, [aria-pressed="true"], [aria-selected="true"]) {
  background: #fff !important; color: #4f46e5 !important; -webkit-text-fill-color: #4f46e5 !important; border-color: #fff !important;
}
/* Vạch tím trước tiêu đề của vài trang (Lịch phát sóng, mẫu tiêu đề…) — trên nền tím thì thừa */
.page-content.pv2 .pv2-skin .page-title::before { display: none !important; }
/* Chip "● Trực tiếp" của Tiện ích phòng */
.page-content.pv2 .pv2-skin .tip-es { background: rgba(255,255,255,.18) !important; color: #fff !important; border-color: transparent !important; }
.page-content.pv2 .pv2-skin .tip-es.on { background: #10b981 !important; color: #fff !important; }
.page-content.pv2 .pv2-skin .tip-luc { color: rgba(255,255,255,.75) !important; }
/* Nhãn nhóm chèn vào đầu trang module */
.page-content.pv2 .pv2-skin-mod .pv2-nhan { display: inline-flex; width: max-content; }

/* ==========================================================================
   CỤM "QUẢN LÝ NỘI DUNG" v2 (15/10 c) — khối dùng chung TrangV2.ui
   ========================================================================== */
.page-content.pv2 .pv2-kpi { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.page-content.pv2 .pv2-kpi:empty { display: none; }
.page-content.pv2 .pv2-kpi-o > div { min-width: 0; }
.page-content.pv2 .pv2-kpi-o b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.page-content.pv2 .pv2-kpi-phu { display: block; font-style: normal; font-size: .68rem; color: var(--p-mo); }

/* Ảnh tròn (host / PIC) + ô chữ cái đầu có biểu tượng */
.page-content.pv2 .pv2-logo.tron, .page-content.pv2 .pv2-logo-chu.tron { border-radius: 50%; }
.page-content.pv2 .pv2-logo-chu i { font-size: .95rem; }
.page-content.pv2 .pv2-ten-chu small { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; white-space: normal; }
.page-content.pv2 .pv2-canh { color: #d97706; font-weight: 700; }
[data-theme="dark"] .page-content.pv2 .pv2-canh { color: #fbbf24; }
.page-content.pv2 .pv2-phu-i { display: inline-flex; align-items: center; gap: 5px; }
.page-content.pv2 .pv2-phu-i i { color: #6366f1; font-size: .72rem; }
.page-content.pv2 .pv2-lk { display: inline-flex; align-items: center; gap: 4px; color: #6366f1; font-weight: 600; text-decoration: none; }
.page-content.pv2 .pv2-lk:hover { text-decoration: underline; }
.page-content.pv2 .pv2-lk i { font-size: .62rem; }
/* Ảnh phòng (room-thumb) trong ô tên */
.page-content.pv2 .pv2-ten .room-thumb { width: 48px; height: 40px; border-radius: 10px; flex: none; }
/* Nút bật/tắt đang BẬT */
.page-content.pv2 .pv2-nut-i.bat { color: #059669; }
.page-content.pv2 .pv2-nut-i.bat i { font-size: 1rem; }
/* Ô mã code / xem trước trong bảng mẫu */
.page-content.pv2 .pv2-bang code.template-code { white-space: normal; word-break: break-word; display: inline-block; max-width: 520px; }
.page-content.pv2 .pv2-bang .preview-text { white-space: normal; }
.page-content.pv2 .pv2-bang .room-pics, .page-content.pv2 .pv2-bang .pic-room-badges { white-space: normal; }

/* Ô chọn trên thanh công cụ */
.page-content.pv2 .pv2-cong-cu .pv2-chon {
  height: 40px; min-width: 170px; padding: 0 34px 0 12px; border: 1.5px solid var(--p-vien); border-radius: 10px;
  background-color: var(--p-the); color: var(--p-chu); font-size: .84rem; font-weight: 600; cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.page-content.pv2 .pv2-cong-cu .pv2-chon:hover { border-color: #c7d2fe; }
.page-content.pv2 .pv2-cong-cu .pv2-chon:focus { outline: 0; border-color: #818cf8; box-shadow: 0 0 0 3px rgba(99,102,241,.14); }

/* Các thẻ cảnh báo của trang Hosts + khối hướng dẫn của Mẫu tiêu đề — cùng kiểu thẻ v2 */
.page-content.pv2 :is(.hosts-scan-warning, .hosts-dup-warning, .info-card) {
  border-radius: 14px !important; box-shadow: var(--p-bong); margin-bottom: var(--p-khe) !important;
}
.page-content.pv2 .info-card { border: 1px solid var(--p-vien) !important; background: var(--p-the) !important; }
.page-content.pv2 .info-card .info-card-icon {
  width: 40px; height: 40px; border-radius: 12px; flex: none; display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #6366f1, #8b5cf6) !important; color: #fff !important;
}
.page-content.pv2 .info-card .info-card-icon i { color: #fff !important; }

@media (max-width: 767px) {
  .page-content.pv2 .pv2-cong-cu .pv2-chon { width: 100%; min-width: 0; }
  .page-content.pv2 .pv2-bang td[data-nhan] > :is(div, code, span) { text-align: right; }
  .page-content.pv2 .pv2-bang td[data-nhan] code.template-code { max-width: 70%; }
}

/* Cột tên không bị bóp còn vài chữ khi bảng nhiều cột (PIC) */
.page-content.pv2 .pv2-bang td.pv2-o-ten { min-width: 210px; }
@media (max-width: 767px) { .page-content.pv2 .pv2-bang td.pv2-o-ten { min-width: 0; } }
@media (max-width: 1023px) {
  .page-content.pv2 .pv2-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  /* 1fr = minmax(auto,1fr) ⇒ nội dung dài (chip kênh) đẩy thẻ tràn phải — phải minmax(0,…) */
  .page-content.pv2 .pv2-bang tbody tr { grid-template-columns: minmax(0, 1fr) auto; }
  .page-content.pv2 .pv2-bang td[data-nhan] { gap: 10px; min-width: 0; }
  .page-content.pv2 .pv2-bang td[data-nhan]::before { flex: none; }
  .page-content.pv2 .pv2-bang td[data-nhan] > * { min-width: 0; overflow-wrap: anywhere; }
  .page-content.pv2 .pv2-bang td[data-nhan] :is(.lc-chip, .lc-txt) { max-width: 100%; white-space: normal; }
}

/* Khối tiêu đề đủ rộng để tiêu đề không gãy dòng khi đầu trang nhiều nút (Tổng hợp lịch) */
@media (min-width: 769px) { .page-content.pv2 .pv2-khoi-tt { flex: 1 1 340px; } }

/* ---------- Cấu hình Phòng: thẻ chọn phòng + ô nhập cùng kiểu v2 ---------- */
#page-room-config.pv2 :is(.room-config-selector, .rcm-bar) {
  border-radius: 16px !important; border: 1px solid var(--p-vien) !important; box-shadow: var(--p-bong) !important;
  background: var(--p-the) !important;
}
#page-room-config.pv2 :is(.form-control, select.form-control) {
  min-height: 42px; border: 1.5px solid var(--p-vien) !important; border-radius: 10px !important;
  background-color: var(--p-the) !important; color: var(--p-chu);
  transition: border-color .15s ease, box-shadow .15s ease;
}
#page-room-config.pv2 .form-control:hover { border-color: #c7d2fe !important; }
#page-room-config.pv2 .form-control:focus { outline: 0; border-color: #818cf8 !important; box-shadow: 0 0 0 3px rgba(99,102,241,.14) !important; }
#page-room-config.pv2 #rcRoomSelector { max-width: 420px; font-weight: 700; }
#page-room-config.pv2 .rc-empty-state {
  border: 1.5px dashed var(--gray-300); border-radius: 16px; background: var(--p-the); padding: 40px 16px;
}
/* Ảnh bấm được để phóng to (trangV2.js mở trình xem chung) */
.page-content.pv2 :is(.pv2-logo, .room-thumb img, .pv2-bang img) { cursor: zoom-in; }