/* ════════════════════════════════════════════════════════════════════
   PND SURFACE — SINGLE SOURCE OF TRUTH cho NỀN + CARD (toàn hệ thống)
   --------------------------------------------------------------------
   #44 — Chỉ TỒN TẠI 2 thứ định nghĩa bề mặt:
     (1) --app-bg   = NỀN giao diện (ảnh world-map + glow cam)
     (2) --card-glass-* = CARD CỰC TRONG VEO (chuẩn panel pub-list)

   File này load CUỐI CÙNG + dùng !important COMPREHENSIVE để KHÓA cứng,
   không file CSS / inline style / per-page override nào đè được.

   NGUYÊN TẮC:
   • body / .main-content / .page-body / .content / .wrapper → --app-bg.
   • MỌI card / surface dạng KHUNG NỀN → --card-glass-bg.
   • Lớp giữa (topbar / filter-bar / table-row …) → TRANSPARENT.
   • NGOẠI LỆ TRẮNG ĐẶC: chứng từ in (.slip / .bbnt / .bbds / .gdntt /
     .giay-de-nghi / .doc-paper / .paper / .sig-pad / .signature / .chu-ky)
     + LOGO + @media print. Class riêng, KHÔNG dùng --card-glass.
   ════════════════════════════════════════════════════════════════════ */

:root{
  /* (1) NỀN giao diện — ảnh world-map (pnd-bg.jpg) phủ viewport.
        #GLASS-UNIFY: veil ZERO (no second layer over the city image). */
  --app-bg-image    : url('/static/img/pnd-bg.jpg');
  --app-bg-veil     : rgba(255,255,255,0);

  /* (2) GOLDEN G — chuẩn từ .rec-filter-bar (lộ rõ hình thành phố).
        bg=transparent (KHÔNG có tint trắng đè), blur+saturate same,
        border là warm beige #EDE8E0, shadow 2 lớp subtle. */
  --card-glass-bg     : rgba(255,255,255,0.16);
  --card-glass-blur   : blur(3px) saturate(140%);
  --card-glass-border : 1px solid rgba(255,255,255,0.6);
  --card-glass-shadow : 0 0 22px rgba(255,122,0,.20), 0 2px 8px rgba(15,23,42,0.08), 0 10px 28px rgba(15,23,42,0.07);
}

/* ── (1) NỀN giao diện ─────────────────────────────────────────────── */
html,body{ background:transparent !important; background-color:transparent !important; }
body{
  font-family:'Plus Jakarta Sans','Inter',-apple-system,BlinkMacSystemFont,
              'Segoe UI',system-ui,Arial,sans-serif !important;
  color:#0B1736;
}
body::before{
  content:''; position:fixed; inset:0; z-index:-2;
  background:var(--app-bg-image) center center / cover no-repeat fixed;
  pointer-events:none;
}
body::after{
  content:''; position:fixed; inset:0; z-index:-1;
  background:var(--app-bg-veil);
  pointer-events:none;
}

/* Lớp giữa (layout/wrapper/header/toolbar) → TRANSPARENT để --app-bg lộ */
.main-content,.page-body,.content,.wrapper,.page-content,.bg-white,
.app,.cn-wrap,.ds-wrap,.hub-page,.login-wrap,.pnd-page,.rp-page,.tqkd,
.wrap,.shell,.layout,.container-fluid,.page,
.qt-wrap,.unc-wrap,.sk-wrap,.ph-wrap,.tt-wrap,.home-wrap,.tt-wrap-body,
.topbar,.top,.card-header,.card-body,.card-footer,.cc-card-body,
.sidebar-brand,.cam-toolbar,.cc-toolbar,
.filter-bar,.filter-toolbar,.adm-filter-bar,.pd-filter,.pg-period-bar,
.deploy-filter-bar,.page-filter-bar,.period-bar,.section-tabs,.seg-ctrl,
.stat-row,.tab-bar,.team-nav-strip,.v7-filter-left,.filters,
.pnd-tabs,.rec-filter,.rec-filter-search,.tt-filt,.bt-filter,.rp-search-row,
.bulk-bar,.ft-mob-bar,.rp-filter,.rp-body,.rp-cam-row,.rp-pagination,
.rec-pagination,.adm-filter-active,.dc-footer,.tt-step,.tt-tbl-foot,
.pg-panel-head,.pg-panel-header,.pg-panel-title,
.rp-tab-ct,.cc-payout-row,.tr-tot td{
  background:transparent !important;
  background-color:transparent !important;
  -webkit-backdrop-filter:none !important;
          backdrop-filter:none !important;
  box-shadow:none !important;
}

/* Ruột bảng → trong suốt (khung bảng là card kính; dòng/ô không sơn) */
[class*="table"] th,[class*="table"] td,[class*="table"] tr,
[class*="tbl"]   th,[class*="tbl"]   td,[class*="tbl"]   tr,
[class*="-table"] thead,[class*="-table"] tbody,
table th,table td,table tr,thead,tbody{
  background:transparent !important;
}

/* ── (2) CARD CỰC TRONG VEO — áp đồng nhất MỌI surface dạng khung ──── */
.sidebar,.side,.sidebar-user,
.card,.card-glass,.cc,.cc-card,.cc-card-footer,.cc-card-hdr,.camp-card,
.camp-card-hero,.pnd-camp-card,.kpi,.kpi-card,.kpi-strip,.stat,.stat-card,
.pnd-stat-card,.pnd-sidebar-card,.pc-stat,.metric-card,.summary-card,
.summary-box,.sub-tot,.detail-card,.table-card,.tcard,.panel,.section-card,
.chart-card,.chart,.report-card,.baocao-card,.kv-card,.widget,.money-card,
.pay-card,.pay-kpi,.pay-kpi-strip,.dash-card,.mc,.ucard,.top-sum,
.ux-progress-card,.ux-alert-card,.bt-card,.pd-kpi-card,.pe-card,.pf-card,
.pg-kpi,.pg-kpi-card,.pg-panel,.pg-panel-footer,.pr-card,.pr-stat,
.cam-form-panel,.ps-band-ctv,.ps-band-dn,.adv-amt-row,.adv-amt-empty,
.adv-summary,.adv-summary-card,.adv-stat,.pt-kpi,.ps-kpi,.ph-kpi,
.cn-kpi,.cn-stat,.tqkd-kpi,.unc-kpi,.audit-stat,.pub-kpi,
.pub-card,.pub-add-card,.rp-card,.rp-chart-card,.rp-mcard,.rp-stat,
.rp-pub-panel,.rp-tbl-container,.rp-tbl-meta,.rec-panel-hdr,.unc-card,
.ds-card,.ws-card,.ws-acc,.ws-hero,.empty-state,.tt-empty,.sp-empty,
.sp-warn,.err-card,.v7-camp-card,.v7-chart-card,.v7-kpi-card,.v7-ov-kpi,
.v7-pay-card,.v7-prod-card,.v7-monthly-card,.v7-revenue-section,
.adm-table-wrap,.cam-table-wrap,.ds-table,.unc-table,.adm-table,.bt-table,
.pr-table,.pg-table,.tt-tbl,.ds-bank-table,.v7-rec-table,
.adv-hist-card,.pnd-glass,.pnd-glass-acc,.dc-card,.dc-payout-box,
.gb-dn,.gb-ctv,.camps-empty,.v7-skel,.tt-totals,.rp-perf-item,
.table-wrap,
.adv-pubms-panel,.pr-pubms-panel,.pg-filter-panel,
.pnd-user-menu,.bottom-sheet,.bottom-sheet-header,.bottom-sheet-footer,
.modal,.dc-modal,.pr-modal,.bt-modal,.login-panel,
.ds-drop,.unc-drop,.rp-cam-dd,
.pp-card,.pp-combo,.pp-stat,.pp-hist-combo-info,
.sk-hero,.sk-life-card,.sk-month,
.home-panel,.hub-card,.rec-panel,.tt-card,.tt-kpi,
.card-list,.card-list-item,
.camp-card-v2,.campaign-card,.project-card-link,
.qt-diagram-card,.qt-flow-card,.qt-mail-card,
.v7rk,.ws,.pubf-tot,.ca-tbl tbody tr,.v7-rec-mcard,.sk-empty,.pg-mb-it,.pg-period-bar,
.pap-card{
  background:var(--card-glass-bg) !important;
  background-color:var(--card-glass-bg) !important;
  -webkit-backdrop-filter:var(--card-glass-blur) !important;
          backdrop-filter:var(--card-glass-blur) !important;
  border:var(--card-glass-border) !important;
  box-shadow:var(--card-glass-shadow) !important;
}

/* #GLASS-ALL — Catch INLINE-STYLED card/KPI có pattern phổ biến mà KHÔNG
   có class trong allowlist (vd advances 4 summary cards, payment_transactions
   stat strip, payment_statements kpi cards). Style attribute chứa
   border:1px solid var(--pnd-border) + border-radius là pattern KPI box. */
div[style*="border:1px solid var(--pnd-border)"][style*="border-radius:12px"],
div[style*="border:1px solid var(--pnd-border)"][style*="border-radius:14px"],
div[style*="box-shadow:0 1px 6px rgba(0,0,0,.05)"][style*="border-radius"]{
  background:var(--card-glass-bg) !important;
  background-color:var(--card-glass-bg) !important;
  -webkit-backdrop-filter:var(--card-glass-blur) !important;
          backdrop-filter:var(--card-glass-blur) !important;
  border:var(--card-glass-border) !important;
  box-shadow:var(--card-glass-shadow) !important;
}
.sidebar-user{ border-left:3px solid #FF7A00 !important; }

/* Tránh "kính chồng kính": card con trực tiếp trong card → phẳng */
.panel > .card,.section-card > .chart-card,.v7-revenue-section > .card,
.pg-panel > .card,.modal > .card,.dc-modal > .card,.pr-modal > .card,
.card .card,.card-glass .card-glass{
  background:transparent !important;
  background-color:transparent !important;
  border:none !important; box-shadow:none !important;
  -webkit-backdrop-filter:none !important;
          backdrop-filter:none !important;
}

/* Sidebar brand/nav trong sidebar → transparent (đã có sidebar kính) */
.sidebar .sidebar-brand,
.sidebar .sidebar-nav,
.sidebar > nav.sidebar-nav,
.sidebar .nav-section,
.sidebar .nav-link{
  background:transparent !important;
  background-color:transparent !important;
  -webkit-backdrop-filter:none !important;
          backdrop-filter:none !important;
}

/* ── INPUT/SELECT/TEXTAREA → CÙNG token .14 cards, viền sáng hơn để
   nhận biết ô; focus = viền cam + alpha nâng nhẹ #GLASS-ALL ────────── */
input,select,textarea,.form-control,.form-select,.pp-input,.pp-select,
.adm-filter-sel,.adm-search,.adm-sel,.cam-form-input,.cam-form-sel,
.cam-form-textarea,.cam-search,.cam-sel,.cc-search,.date-in,.fch,
.field-input,.form-inp,.form-sel,.form-ta,.ft-sheet-input,.months-mini,
.num-input,.pe-field input,.period-bar .year-pick,.pnd-input,
.pub-field input,.rec-fg input,.rec-fg select,.rec-filter-search input,
.rp-search,.search-in,.search-input,.v7-daterange,.v7-rec-camp-select,
.year-pick,
.pr-pubms-search,.adv-pubms-search,.adv-hist-search,.pr-pubms-trigger,
.adv-pubms-trigger{
  background:var(--card-glass-bg) !important;
  color:#1a1a1a !important;
  border:var(--card-glass-border) !important;
  -webkit-backdrop-filter:var(--card-glass-blur) !important;
          backdrop-filter:var(--card-glass-blur) !important;
  transition:border-color .14s, background-color .14s, box-shadow .14s;
}
input:focus,select:focus,textarea:focus,
.form-control:focus,.form-select:focus,
.pp-input:focus,.pp-select:focus{
  /* Focus: nâng tint nhẹ + viền cam để biết ô đang chọn */
  background:rgba(255,255,255,.10) !important;
  background-color:rgba(255,255,255,.10) !important;
  border-color:#FF7A00 !important;
  outline:none !important;
  box-shadow:0 0 0 3px rgba(255,122,0,.16) !important;
}
input::placeholder,textarea::placeholder{ color:#5b6470 !important; }
/* checkbox + radio: KHÔNG glass — giữ native render */
input[type="checkbox"],input[type="radio"]{
  background:initial !important;
  background-color:initial !important;
  border:initial !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  box-shadow:none !important;
}

/* ── NÚT CAM (accent) — KHÔNG glass ───────────────────────────────── */
.btn-primary,.btn-primary-pnd,.btn-cta,.btn-pnd,.btn-orange,.btn-gold,
.btn-cam,.btn-deploy,.btn-login,.btn-apply,.btn-new,.btn-all,.btn-b,
.btn-adm-green,.pr-btn-pay,.fp.a,.fp.on,.cat-tab.on,.type-btn.active,
.seg-ctrl-btn.active,.pf-tab.active,.pnd-filter-pill.active,
.adm-filter-btn-apply{
  background:#FF7A00 !important;
  color:#fff !important;
  border-color:#FF7A00 !important;
}

/* ── NGOẠI LỆ DUY NHẤT — TRẮNG ĐẶC (chứng từ in / chữ ký / logo) ──── */
.slip,.slip *,
.bbnt,.bbds,.gdntt,.gdntu,.giay-de-nghi,.de-nghi,.chung-tu,.doc-paper,.paper,
.pnd-paper,
.bt-sig-img,.bt-sig-modal,.bt-sig-modal-prev,.bt-sig-preview,.bt-sig-slot,
.pf-sig-pad-wrap,.sig-pad,.signature,.chu-ky,.chuky,#pfSigPad{
  background:#ffffff !important;
  color:#1a1a1a !important;
  -webkit-backdrop-filter:none !important;
          backdrop-filter:none !important;
}
.cb-logo,.cc-logo,.camp-logo,.v7-prod-logo,.sidebar-logo-wrap,
.sidebar-logo-img,.brand-logo,.pnd-brand-logo,.logo,.sb-logo-mark{
  background:transparent !important;
  -webkit-backdrop-filter:none !important;
          backdrop-filter:none !important;
  box-shadow:none !important;
}

/* ════════════════════════════════════════════════════════════════════
   #GLASS-FINAL G1 — DEFAULT-ON CATCH-ALL
   --------------------------------------------------------------------
   MỌI class chứa pattern surface (`-card`, `-kpi`, `-panel`, `-widget`,
   `-tile`, `-surface`) trong vùng nội dung app (.main-content/.app/...)
   tự động được glass .14 — KHÔNG cần liệt class vào allowlist phía trên.
   Allowlist phía trên giờ là "belt"; selector dưới này là "suspenders".

   Cách OPT-OUT (giữ nền riêng):
     1. Thêm class `.no-glass` lên element.
     2. Hoặc dùng tên class với infix sub-piece (vd `card-icon` không khớp
        vì có infix `-card-` cản; chỉ class kết thúc `-card` mới khớp).
     3. Chứng từ in / chữ ký / logo / mail đã loại sẵn trong :where().

   ACCEPTANCE: tạo `<div class="zzz-fresh-card">` trong .app → computed
   .14 ngay (chứng minh default-on, không cần sửa CSS).
   ════════════════════════════════════════════════════════════════════ */
:is(.main-content,.app,.page-body,.pnd-page,.pub-page,.ds-wrap,.rp-page,.cn-wrap,.tqkd,.hub-page) :is([class*="-card"]:not([class*="-card-"]),[class*="-kpi"]:not([class*="-kpi-"]),[class*="-panel"]:not([class*="-panel-"]),[class*="-widget"]:not([class*="-widget-"]),[class*="-tile"]:not([class*="-tile-"]),[class*="-surface"]:not([class*="-surface-"])):where(:not(.no-glass):not(.slip):not(.bbnt):not(.bbds):not(.gdntt):not(.gdntu):not(.giay-de-nghi):not(.chung-tu):not(.doc-paper):not(.paper):not(.pnd-paper):not(.print-doc):not(.sig-pad):not(.signature):not(.chu-ky):not(.chuky):not([class*="logo"]):not([class*="brand-"])){
  background:var(--card-glass-bg) !important;
  background-color:var(--card-glass-bg) !important;
  -webkit-backdrop-filter:var(--card-glass-blur) !important;
          backdrop-filter:var(--card-glass-blur) !important;
  border:var(--card-glass-border) !important;
  box-shadow:var(--card-glass-shadow) !important;
}

/* OPT-OUT explicit — .no-glass thắng allowlist phía trên (cùng !important
   nhưng selector specificity 0,1,1 vs 0,1,0) */
:where(.main-content,.app,.page-body,body) .no-glass,
:where(.main-content,.app,.page-body,body) .no-glass *{
  background:transparent !important;
  background-color:transparent !important;
  -webkit-backdrop-filter:none !important;
          backdrop-filter:none !important;
}

/* ════════════════════════════════════════════════════════════════════
   #GLASS-KILL — DIỆT LỚP ĐÈ INLINE
   --------------------------------------------------------------------
   Tìm thấy 2026-06-02: 47+ inline `<div style="background:#F...;
   padding:Npx;border-radius:Npx">` trong templates ăn ảnh nền city.
   Vd /admin/publishers `<div style="background:#F9F5F2;padding:20px
   24px;border-radius:12px;">` — div ngoài cùng wrap toàn bộ list.

   Quy tắc: trong vùng nội dung app, mọi `<div/section/aside>` có inline
   `background:#F...` (light hex) + padding container (≥10px) + không
   phải pill/circle → transparent. Glass card rule phía trên tự ăn.
   ════════════════════════════════════════════════════════════════════ */
:is(.main-content,.app,.page-body,.pnd-page,.pub-page,.ds-wrap,.rp-page,.cn-wrap,.tqkd,.hub-page) :is(div,section,aside,header,footer)[style*="background:#f" i]:where(:not(.no-glass):not(.slip):not(.bbnt):not(.bbds):not(.gdntt):not(.gdntu):not(.giay-de-nghi):not(.chung-tu):not(.doc-paper):not(.paper):not(.pnd-paper):not(.print-doc):not(.sig-pad):not(.signature):not(.chu-ky):not(.chuky):not([style*="border-radius:99"]):not([style*="border-radius:9999"]):not([style*="border-radius:50%"]):not([style*="border-radius:50px"]):not([style*="padding:2px"]):not([style*="padding:3px"]):not([style*="padding:4px"]):not([style*="padding:5px"]):not([style*="padding:6px"]):not([style*="padding:7px"]):not([style*="padding:8px"]):not([style*="padding:9px"]):not([style*="padding:0"])){
  background:transparent !important;
  background-color:transparent !important;
}
/* Same with `background-color:` declaration. */
:is(.main-content,.app,.page-body,.pnd-page,.pub-page,.ds-wrap,.rp-page,.cn-wrap,.tqkd,.hub-page) :is(div,section,aside,header,footer)[style*="background-color:#f" i]:where(:not(.no-glass):not(.slip):not(.bbnt):not(.bbds):not(.gdntt):not(.gdntu):not(.giay-de-nghi):not(.chung-tu):not(.doc-paper):not(.paper):not(.pnd-paper):not(.print-doc):not(.sig-pad):not(.signature):not(.chu-ky):not(.chuky):not([style*="border-radius:99"]):not([style*="border-radius:9999"]):not([style*="border-radius:50%"]):not([style*="border-radius:50px"]):not([style*="padding:2px"]):not([style*="padding:3px"]):not([style*="padding:4px"]):not([style*="padding:5px"]):not([style*="padding:6px"]):not([style*="padding:7px"]):not([style*="padding:8px"]):not([style*="padding:9px"]):not([style*="padding:0"])){
  background:transparent !important;
  background-color:transparent !important;
}

/* ── PUB bottom tab-bar (mobile): FROSTED ĐỤC — KHÔNG trong veo ──────
   Nav cố định phải đọc được trên mọi nền content cuộn phía sau.
   Tone chốt 2026-06-12: trắng .86 + blur 24 + shadow hắt lên. */
.v7-tab-bar{
  background:rgba(255,255,255,.86) !important;
  -webkit-backdrop-filter:blur(24px) saturate(160%) !important;
          backdrop-filter:blur(24px) saturate(160%) !important;
  border-top:0.5px solid rgba(255,255,255,.6) !important;
  box-shadow:0 -6px 20px rgba(11,23,54,.10) !important;
}

/* ── @media print → trắng đặc cho mọi phiếu/chứng từ in ───────────── */
@media print{
  *{ -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
  html,body{ background:#fff !important; }
  body::before,body::after{ display:none !important; }
  .slip,.slip *,.bbnt,.bbds,.gdntt,.gdntu,.giay-de-nghi,.chung-tu,.paper,.pnd-paper{
    background:#ffffff !important; box-shadow:none !important; border:none !important;
  }
}

/* ── MOBILE (≤768px) — Dũng: card kính quá trong trên điện thoại ──────
   Desktop giữ kính trong veo trên nền world-map. Mobile content-dense,
   drawer đè lên content → tăng độ đục + blur cho đọc rõ; drawer SOLID. */
@media (max-width:768px){
  :root{
    --card-glass-bg   : rgba(255,255,255,0.92);
    --card-glass-blur : blur(20px) saturate(150%);
  }
  /* Drawer off-canvas đè lên content → phải đặc, không cho content xuyên qua */
  .sidebar{
    background:#FFF8F2 !important;
    background-color:#FFF8F2 !important;
    -webkit-backdrop-filter:none !important;
            backdrop-filter:none !important;
    box-shadow:2px 0 30px rgba(15,23,42,.24) !important;
  }
  /* Scrim đậm hơn để tách drawer khỏi nền */
  .sidebar-overlay{ background:rgba(11,23,54,0.48) !important; }
  /* .v7r-hero (pub/home) là container bố cục, KHÔNG phải card glass.
     Trong suốt để radar nổi trên nền + 4 KPI .v7rk là card riêng
     (card nào ra card đó, hết nền trải dài). Đặt ở file CSS để tới
     chắc qua cache-bust, không phụ thuộc cache trang home.html. */
  .v7r-hero{
    background:none !important;
    border:none !important;
    box-shadow:none !important;
    -webkit-backdrop-filter:none !important;
            backdrop-filter:none !important;
    padding:0 !important;
  }
}