/* ui-nph — 24/09/2026
   ===== NHÀ PHÁT HÀNH (vai SA) — bản nhìn theo Stitch 7 · 8 (Fable, 24/09/2026) =====
   Nạp SAU app.css. Chủ dự án: không viền quanh thẻ / dòng / ô nhập — phân khối bằng tông nền và
   chuyển màu nhẹ; khối bo 16–24px, nhiều khoảng thở; chữ ít, biểu tượng + nhãn ngắn; MỘT nút tím
   mỗi màn; vùng bấm ≥44px; dùng được ở 390px và 1440px. Chỉ dùng token màu của app.css (:root) —
   không mã hex, để chế độ tối đi theo token.
   Tiền tố `pb-` (lớp mới). Lớp `nph-*` cũ trong app.css chỉ còn là móc cho phép thử
   (`.nph-pheu-tang`, `.nph-xm-buoc`) và cho hàm nạp ảnh (`.nph-xm-anh*`) — ở đây ghi đè phần nhìn. */

/* Biến bo góc khai ở CẢ `.pb` lẫn `.pb-nk`: ngăn kéo gắn vào <body>, nằm ngoài `.pb`. */
.pb,.pb-nk{--pb-bo:20px; --pb-bo-nho:14px}
.pb{display:flex;flex-direction:column;gap:20px;min-width:0}
.pb .dau{margin-bottom:0;align-items:center}
.pb .dau h2{font-size:24px;font-weight:800;letter-spacing:-.02em}
.pb .dau p{font-size:13px}
.pb-ico{display:inline-flex;width:18px;height:18px;flex:none}
.pb-ico svg{width:100%;height:100%}
.pb-vai{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;
        background:var(--the);color:var(--chu);font-size:13px;font-weight:600}
.pb-vai i{width:8px;height:8px;border-radius:50%;background:var(--tot)}

/* ---------- Thanh tab: viên mềm có biểu tượng, cuộn ngang ở 390px ---------- */
.pb-tab{display:flex;gap:6px;padding:6px;border-radius:18px;background:var(--the);
        overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.pb-tab::-webkit-scrollbar{display:none}
.pb-tab-nut{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:0;
            border-radius:13px;background:transparent;color:var(--chu2);font:inherit;font-size:14px;
            font-weight:600;white-space:nowrap;cursor:pointer;transition:background .15s,color .15s}
.pb-tab-nut:hover{background:var(--nen);color:var(--chu)}
.pb-tab-nut.dang{background:var(--nhan-nhat);color:var(--nhan)}
.pb-tab-nut .pb-ico{width:18px;height:18px}
.pb-tab-dem{min-width:22px;height:22px;padding:0 7px;border-radius:999px;display:inline-grid;place-items:center;
            background:var(--nen);color:var(--chu2);font-size:11.5px;font-weight:700}
.pb-tab-nut.dang .pb-tab-dem{background:var(--nhan);color:var(--the)}
/* `.khung.pk-hrm .chinh .mono` (ui-hrm.css, 4 lớp) lấn sang mọi `.mono` trong khung → số xám trên nền tím (QA 26/09). */
.khung .pb .pb-tab-nut.dang .pb-tab-dem{color:#fff}
.pb-tab-dem.canh{background:var(--canh-nhat);color:var(--canh)}
/* Tab ĐANG CHỌN mà số là việc chờ (Hoá đơn, Hỗ trợ): giữ màu cảnh báo (QA 26/09). */
.khung .pb .pb-tab-nut.dang .pb-tab-dem.canh,.pb-tab-nut.dang .pb-tab-dem.canh{background:var(--canh-nhat);color:var(--canh)}
.pb-tk-khoi{margin-top:10px}

/* ---------- Khung chung ---------- */
.pb-man{display:flex;flex-direction:column;gap:20px;min-width:0}
.pb-khoi{background:var(--the);border-radius:var(--pb-bo);padding:22px 24px;display:flex;flex-direction:column;
         gap:18px;min-width:0}
.pb-khoi-dau{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.pb-khoi-dau h3{margin:0;font-size:16px;font-weight:700;letter-spacing:-.01em;color:var(--chu)}
.pb-khoi-dau p{margin:3px 0 0;font-size:12.5px;color:var(--chu3)}
.pb-khoi-sat{padding:8px 8px 4px}
.pb-khoi-bang{gap:10px}
.pb-khoi-bang > .pb-khoi-dau{padding:0}
.pb-huy{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;background:var(--nen);
        color:var(--chu2);font-size:11.5px;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.pb-huy.tot{background:var(--tot-nhat);color:var(--tot)}
.pb-huy.loi{background:var(--loi-nhat);color:var(--loi)}
.pb-huy.canh{background:var(--canh-nhat);color:var(--canh)}
.pb-huy.cham::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.pb-nut-chu{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 10px;border:0;
            background:transparent;color:var(--nhan);font:inherit;font-size:13.5px;font-weight:700;
            cursor:pointer;border-radius:12px;white-space:nowrap}
.pb-nut-chu:hover{background:var(--nhan-nhat)}
.pb-nut-chu .pb-ico{width:16px;height:16px}
.pb-dang{padding:48px 0;text-align:center;color:var(--chu3);font-size:13px}
.pb-rong{display:flex;align-items:center;gap:10px;margin:0;color:var(--chu3);font-size:13px}
.pb-rong.to{justify-content:center;padding:40px 16px;flex-direction:column;text-align:center}
.pb-rong.to .pb-ico{width:36px;height:36px;padding:10px;border-radius:50%;background:var(--nen);color:var(--chu3);box-sizing:content-box}
.pb-chan{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
         margin-top:auto;padding-top:14px;box-shadow:inset 0 1px 0 var(--nen);font-size:12px;color:var(--chu3)}
.pb-chan b{color:var(--chu2);font-weight:600}

/* ---------- Bốn ô số (Stitch 7 §2) ---------- */
.pb-o-luoi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.pb .the.so.pb-o{border:0;box-shadow:none;border-radius:var(--pb-bo);background:var(--the);padding:20px 22px;
                  display:flex;flex-direction:column;gap:14px;min-height:0;min-width:0}
.pb-o-dau{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.pb-o-nhan{font-size:13px;font-weight:600;color:var(--chu2);line-height:1.35}
.pb-o-so{margin-top:auto;font-size:26px;font-weight:700;letter-spacing:-.02em;color:var(--chu);line-height:1.1;white-space:nowrap}
.pb-o-so small{font-size:16px;font-weight:500;color:var(--chu3)}
.pb-o-canh .pb-o-so,.pb-o-canh .pb-o-so small{color:var(--canh)}
.pb-o-phu{font-size:12px;color:var(--chu3);line-height:1.4;margin-top:-6px}
.pb-o-canh{background:linear-gradient(160deg,var(--the) 55%,var(--canh-nhat)) !important}

/* ---------- Dải việc (nền hổ phách nhạt, dòng trắng, nút chữ tím) ---------- */
.pb-viec{border-radius:var(--pb-bo);padding:14px;display:flex;flex-direction:column;gap:12px;
         background:linear-gradient(135deg,var(--canh-nhat),color-mix(in srgb,var(--canh-nhat) 55%,var(--the)))}
.pb-viec-dau{display:flex;align-items:center;gap:10px;padding:2px 6px;color:var(--canh);font-size:13.5px}
.pb-viec-dau .pb-huy{background:var(--the);color:var(--canh)}
.pb-viec-ds{display:flex;flex-direction:column;gap:4px}
.pb-viec-dong{display:flex;align-items:center;gap:12px;padding:4px 6px 4px 16px;border-radius:var(--pb-bo-nho);
              background:color-mix(in srgb,var(--the) 88%,transparent)}
.pb-cham{width:8px;height:8px;border-radius:50%;background:var(--canh);flex:none}
.pb-viec-chu{flex:1;min-width:0;font-size:13.5px;color:var(--chu);line-height:1.4;padding:8px 0}
.pb-viec.xong{flex-direction:row;align-items:center;gap:10px;padding:14px 20px;flex-wrap:wrap;
              background:linear-gradient(135deg,var(--tot-nhat),color-mix(in srgb,var(--tot-nhat) 50%,var(--the)))}
.pb-viec.xong .pb-ico{color:var(--tot);width:20px;height:20px}
.pb-viec.xong b{color:var(--tot);font-size:13.5px}
.pb-viec.xong span{font-size:12.5px;color:var(--chu2)}

/* ---------- Hai khối ngang hàng: phễu (60%) · đăng ký theo ngày (40%) ---------- */
.pb-2cot{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:20px;align-items:stretch}
.pb-pheu{display:flex;flex-direction:column;gap:0;flex:1}
.pb .nph-pheu{display:flex;flex-direction:column;gap:14px}
.pb .nph-pheu-tang{display:flex;flex-direction:column;gap:7px}
.pb-pheu-nhan{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:12.5px;color:var(--chu)}
.pb-pheu-nhan b{font-size:12.5px}
.pb-pheu-nhan small{font-weight:400;color:var(--chu3);font-size:11.5px}
.pb .nph-pheu-tang.cuoi .pb-pheu-nhan b{color:var(--nhan)}
.pb-pheu-ray{height:14px;border-radius:999px;background:var(--nen);overflow:hidden}
.pb-pheu-fill{height:100%;border-radius:999px;min-width:0;transition:width .3s;
              background:linear-gradient(90deg,var(--nhan),color-mix(in srgb,var(--nhan) 78%,var(--the)))}
.pb-pheu > .pb-chan{margin-top:18px}
.pb-tb{display:flex;align-items:baseline;gap:4px;white-space:nowrap}
.pb-tb b{font-size:18px;color:var(--chu)}
.pb-tb small{font-size:11.5px;color:var(--chu3)}
.pb-cot-khung{display:flex;flex-direction:column;gap:8px;flex:1;justify-content:flex-end;min-height:190px}
.pb-cot-hang{display:flex;align-items:flex-end;gap:4px;height:150px;padding:0;
             box-shadow:inset 0 -1px 0 var(--nen)}
.pb-cot{flex:1;height:100%;display:flex;align-items:flex-end;min-width:0}
.pb-cot-fill{width:100%;border-radius:4px 4px 2px 2px;background:color-mix(in srgb,var(--nhan) 22%,var(--the))}
.pb-cot.moi .pb-cot-fill{background:linear-gradient(180deg,color-mix(in srgb,var(--nhan) 80%,var(--the)),var(--nhan))}
.pb-cot.rong .pb-cot-fill{height:4px !important;background:var(--nen)}
.pb-cot.moi.rong .pb-cot-fill{background:var(--nhan-nhat)}
.pb-truc{display:flex;justify-content:space-between;font-size:10.5px;color:var(--chu3)}
.pb-truc .nay{color:var(--nhan);font-weight:700}
.pb-chu-giai{display:inline-flex;align-items:center;gap:6px}
.pb-chu-giai i{width:8px;height:8px;border-radius:50%;background:var(--nhan)}

/* ---------- Bảng trong khối trắng: không viền, đầu cột chữ nhỏ, dòng tách bằng vạch màu nền ---------- */
.pb .bang,.pb-nk .bang{border:0;border-radius:0;background:transparent;box-shadow:none}
.pb .bang table{border-collapse:separate;border-spacing:0;width:100%}
.pb .bang th{background:transparent;border:0;padding:12px 14px;font-size:11px;font-weight:700;letter-spacing:.05em;
             text-transform:uppercase;color:var(--chu3);text-align:left;white-space:nowrap}
.pb .bang td{border:0;padding:14px;font-size:13px;vertical-align:middle;box-shadow:inset 0 1px 0 var(--nen)}
.pb .bang tbody tr:first-child td{box-shadow:none}
.pb .bang td.so{text-align:center}
.pb .bang td.phai{text-align:right}
.pb .bang tbody tr{transition:background .12s}
.pb .bang tbody tr:hover td{background:color-mix(in srgb,var(--nhan-nhat) 45%,transparent)}
.pb .bang tbody tr.dang td{background:var(--nhan-nhat)}
.pb .bang tbody tr.dang td:first-child{box-shadow:inset 4px 0 0 var(--nhan)}
.pb .bang tbody tr.dang .pb-ten b{color:var(--nhan)}
.pb .bang td:first-child{border-radius:14px 0 0 14px}
.pb .bang td:last-child{border-radius:0 14px 14px 0}
.pb-dong-bam{cursor:pointer}
.pb-ten{display:flex;flex-direction:column;gap:3px;min-width:180px}
.pb-ten b{font-size:13.5px;font-weight:700;color:var(--chu)}
.pb-ten small{font-size:12px;color:var(--chu3);line-height:1.35}
.pb-qm{display:flex;flex-direction:column;gap:2px}
.pb-qm small{font-size:11.5px;color:var(--chu3)}
.pb-so-dam{font-weight:700;color:var(--chu)}
.pb-do{color:var(--loi) !important;font-weight:600}
.pb-tt .chip,.pb-tt-o .chip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;font-size:11.5px;font-weight:700}
.pb-tt .chip::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.9}
.pb-tt-o{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.pb-tt-o .nph-xm-nhan{padding:5px 10px;font-size:11px}
.pb-ma{padding:3px 8px;border-radius:8px;background:var(--nen);font-size:12px;white-space:nowrap}
.pb-sdt{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--nhan);text-decoration:none;font-weight:600}
.pb-sdt .pb-ico{width:15px;height:15px}
.pb-bang-chan{padding:10px 14px 12px;font-size:12px;color:var(--chu3)}
.pb .nph-bang-hop{min-width:0;overflow-x:auto}

/* ---------- Thanh lọc (Stitch 8): ô tìm nền mềm + chip ---------- */
.pb-loc{background:var(--the);border-radius:var(--pb-bo);padding:12px;display:flex;flex-direction:column;gap:12px}
.pb-loc-gon{padding:8px}
.pb-tim{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 16px;border-radius:14px;
        background:var(--nen);color:var(--chu3);cursor:text}
.pb-tim:focus-within{background:var(--the);box-shadow:0 0 0 2px var(--nhan-nhat)}
.pb-tim-o{flex:1;min-width:0;border:0 !important;outline:0;background:transparent !important;box-shadow:none !important;
          font:inherit;font-size:14px;color:var(--chu);padding:12px 0 !important;height:auto !important}
.pb-chip-hang{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.pb-chip-gian{flex:1}
.pb-chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:0;border-radius:999px;
         background:var(--nen);color:var(--chu2);font:inherit;font-size:13px;font-weight:600;cursor:pointer;
         transition:background .15s,color .15s}
.pb-chip:hover{background:color-mix(in srgb,var(--nen) 60%,var(--vien))}
.pb-chip.dang{background:var(--nhan-nhat);color:var(--nhan)}
.pb-chip-dem{font-size:11.5px;color:var(--chu3);font-weight:600}
.pb-chip.dang .pb-chip-dem{min-width:22px;height:20px;padding:0 7px;border-radius:999px;display:inline-grid;place-items:center;
                           background:var(--nhan);color:var(--the)}
.pb-cham-nho{width:7px;height:7px;border-radius:50%;background:var(--chu3);font-style:normal}
.pb-chip.tot .pb-cham-nho{background:var(--tot)}
.pb-chip.loi .pb-cham-nho{background:var(--loi)}
.pb-chip.canh .pb-cham-nho{background:var(--canh)}
.pb-chip.nhan .pb-cham-nho{background:var(--nhan)}
.pb-chip.xm{background:var(--canh-nhat);color:var(--canh)}
.pb-chip.xm .pb-chip-dem{color:var(--canh)}
.pb-chip.xm.dang{background:var(--canh);color:var(--the)}
.pb-chip.xm.dang .pb-cham-nho{background:var(--the)}
.pb-chip.xm.dang .pb-chip-dem{background:var(--the);color:var(--canh)}

/* ---------- Ngăn kéo chi tiết 420px (Stitch 8 bên phải) ---------- */
.pb-nk{position:fixed;top:0;right:0;bottom:0;width:440px;max-width:100%;z-index:85;display:flex;flex-direction:column;
       background:var(--the);box-shadow:-24px 0 60px -30px rgba(20,20,40,.35);animation:pb-nk-vao .22s ease-out}
/* Tầng: ngăn kéo (85) phải nằm TRÊN nút mở thanh bên ở điện thoại (78), còn hộp thoại mở TỪ
   ngăn kéo (gia hạn, xác nhận tiền, liên kết, phóng ảnh — `.lop` 50) phải nằm trên ngăn kéo. */
body.pb-co-nk .lop{z-index:95}
@keyframes pb-nk-vao{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.pb-nk{animation:none}}
.pb-nk-dong{position:absolute;top:14px;right:14px;z-index:2}
.pb-nk .pb-nk-dong{background:var(--the);box-shadow:0 2px 10px -2px rgba(20,20,40,.18)}
.pb-nut-ico{width:44px;height:44px;border:0;border-radius:50%;background:var(--nen);color:var(--chu2);display:grid;
            place-items:center;cursor:pointer}
.pb-nut-ico:hover{background:var(--nhan-nhat);color:var(--nhan)}
.pb-nk-hop{flex:1;min-height:0;overflow:auto;padding:0 20px 28px}
.pb-nk-than{display:flex;flex-direction:column;gap:14px}
/* Tên phòng khám dính đầu ngăn kéo khi cuộn — luôn biết đang xem ai; chừa chỗ nút Đóng. */
.pb-nk-tieu{position:sticky;top:0;z-index:1;background:var(--the);padding:22px 60px 10px 4px}
.pb-nk-tieu-hang{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pb-nk-tieu h2{margin:0;font-size:20px;font-weight:800;letter-spacing:-.02em;color:var(--chu)}
.pb-nk-tieu p{margin:4px 0 0;font-size:12.5px;color:var(--chu3)}
.pb-nk-khoi{background:var(--nen);border-radius:var(--pb-bo);padding:16px 18px;display:flex;flex-direction:column;
            gap:12px;min-width:0}
.pb-nk .pb-nk-khoi{background:color-mix(in srgb,var(--nen) 75%,var(--the))}
.pb-nk-khoi-dau{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.pb-nk-khoi-dau h3{margin:0;display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--chu)}
.pb-nk-khoi-dau h3 .pb-ico{color:var(--nhan)}
.pb-nk-luoi{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}
.pb-nk-o{display:flex;flex-direction:column;gap:3px;min-width:0}
.pb-nk-o.rong{grid-column:1 / -1}
.pb-nk-o span{font-size:11.5px;color:var(--chu3)}
.pb-nk-o b{font-size:13.5px;font-weight:600;color:var(--chu);overflow-wrap:anywhere}
.pb-nk-o a{color:var(--chu);text-decoration:none}
.pb-nk-giay{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-top:12px;box-shadow:inset 0 1px 0 var(--vien-mem,var(--vien));font-size:12.5px}
.pb-nk-giay > :last-child{margin-left:auto}
.pb-nk-hang{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.pb-nk-nut{display:flex;flex-direction:column;gap:8px;padding-top:4px}
.pb-nut-mem{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 18px;border:0;
            border-radius:14px;background:var(--nen);color:var(--chu);font:inherit;font-size:14px;font-weight:600;
            cursor:pointer;transition:background .15s}
.pb-nut-mem:hover{background:color-mix(in srgb,var(--nen) 55%,var(--vien))}
.pb-nut-mem.nhan{background:var(--nhan-nhat);color:var(--nhan)}
.pb-nut-mem.nhan:hover{background:color-mix(in srgb,var(--nhan-nhat) 70%,var(--nhan) 12%)}
.pb-nut-mem.nho{min-height:44px;padding:0 14px;font-size:13px;border-radius:12px;white-space:nowrap}
.pb-nk .pb-nut-mem:not(.nhan){background:var(--the)}
.pb-nk .pb-nk-nut .pb-nut-mem{background:var(--nen);width:100%}
.pb-nut-chinh{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:50px;
              border-radius:14px;font-size:15px;font-weight:700;border:0;
              background:linear-gradient(135deg,var(--nhan),color-mix(in srgb,var(--nhan) 82%,var(--navy,var(--chu))));}
.pb-ghi-chu{width:100%;box-sizing:border-box;min-height:88px;border:0 !important;border-radius:14px;padding:12px 14px;
            font:inherit;font-size:13.5px;line-height:1.5;background:var(--the);color:var(--chu);resize:vertical;outline:0}
.pb-ghi-chu:focus{box-shadow:0 0 0 2px var(--nhan-nhat)}
.pb-lien-ket{flex:1;min-width:0;border:0;border-radius:12px;padding:12px;background:var(--nen);color:var(--chu);font-size:12.5px}
.pb-nhac{display:flex;align-items:flex-start;gap:8px;margin:0;padding:12px 14px;border-radius:14px;
         background:var(--canh-nhat);color:var(--canh);font-size:12.5px;font-weight:600;line-height:1.45}
.pb-nhac .pb-ico{width:16px;height:16px;margin-top:1px}
.pb-hd0{background:var(--the);border-radius:14px;padding:6px 14px;display:flex;flex-direction:column}
.pb-hd0-hang{display:flex;align-items:center;gap:8px;min-height:40px;font-size:12.5px}
.pb-hd0-hang + .pb-hd0-hang{box-shadow:inset 0 1px 0 var(--nen)}
.pb-hd0-hang > :nth-child(2){margin-left:auto}
.pb-hd0-hang .pb-day{margin-left:8px}
.pb-hd0-hang b.mono{font-size:14px}
.pb-hd0-tien{font-size:17px !important;color:var(--chu)}
.pb-hd0-tien.cho{color:var(--loi)}
.pb-hd-ds{display:flex;flex-direction:column;gap:2px}
.pb-hd-dong{display:grid;grid-template-columns:1.2fr .9fr 1.1fr auto;gap:8px;align-items:center;padding:8px 4px;font-size:12px}
.pb-nd-ds{display:flex;flex-direction:column;gap:6px}
.pb-nd{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:14px;background:var(--the)}
.pb-vong{width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:13px;font-weight:700;
         background:var(--nhan-nhat);color:var(--nhan)}
.pb-nd-than{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.pb-nd-than b{font-size:13px;color:var(--chu)}
.pb-nd-than small{font-size:11.5px;color:var(--chu3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- Hồ sơ xác minh: điểm · ảnh giấy tờ · 7 bước · phần trích · nút duyệt ---------- */
.pb-xm{background:linear-gradient(180deg,color-mix(in srgb,var(--nhan-nhat) 80%,var(--the)),color-mix(in srgb,var(--nen) 75%,var(--the)) 55%) !important}
.pb-diem-hang{display:flex;align-items:center;gap:14px;background:var(--the);border-radius:16px;padding:12px 14px}
.pb-diem{flex:none;width:68px;height:68px;border-radius:50%;display:grid;place-items:center;
         background:var(--nen);color:var(--chu)}
.pb-diem.tot{background:var(--tot-nhat);color:var(--tot)}
.pb-diem.canh{background:var(--canh-nhat);color:var(--canh)}
.pb-diem.loi{background:var(--loi-nhat);color:var(--loi)}
.pb-diem b{font-size:22px;font-weight:700}
.pb-diem small{font-size:11px;opacity:.8}
.pb-diem-than{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.pb-diem-ray{height:8px;border-radius:999px;background:var(--nen);overflow:hidden}
.pb-diem-fill{height:100%;border-radius:999px;background:var(--chu3)}
.pb-diem-fill.tot{background:var(--tot)}
.pb-diem-fill.canh{background:var(--canh)}
.pb-diem-fill.loi{background:var(--loi)}
.pb-diem-meta{display:flex;flex-direction:column;gap:2px;font-size:12px;color:var(--chu2)}
.pb-diem-meta .mono{font-size:11.5px;color:var(--chu3)}
.pb-anh-luoi{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pb .nph-xm-anh-o,.pb-nk .nph-xm-anh-o{margin:0;display:flex;flex-direction:column;gap:6px;min-width:0}
.pb-nk .pb-anh-hop{position:relative;aspect-ratio:4 / 3;border-radius:14px;overflow:hidden;background:var(--the);
                   display:flex;align-items:center;justify-content:center;border:0;min-height:0}
.pb-nk .nph-xm-anh{width:100%;height:100%;object-fit:cover;display:block;cursor:zoom-in;transition:transform .2s}
.pb-nk .nph-xm-anh:hover{transform:scale(1.03)}
.pb-nk .nph-xm-anh:not([src]){display:none}
.pb-nk .nph-xm-anh-cho{position:absolute;font-size:12px;color:var(--chu3)}
.pb-nk .nph-xm-anh-o figcaption{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--chu2)}
.pb-nk .nph-xm-anh-o figcaption .pb-ico{width:14px;height:14px;color:var(--chu3)}
.pb-nk .nph-xm-anh-o figcaption .pb-anh-to{margin-left:auto}
.pb-nk .nph-xm-anh-loi{font-size:12px;color:var(--loi)}
.pb-nk .nph-xm-anh-loi:empty{display:none}
.pb-buoc-ds{display:flex;flex-direction:column;gap:2px;background:var(--the);border-radius:16px;padding:6px}
.pb-nk .nph-xm-buoc.pb-buoc{display:flex;align-items:flex-start;gap:12px;padding:10px;border:0;border-radius:12px;background:transparent}
.pb-buoc-dau{width:24px;height:24px;border-radius:50%;padding:4px;box-sizing:border-box;background:var(--nen);color:var(--chu3);margin-top:1px}
.pb-buoc.dat .pb-buoc-dau{background:var(--tot-nhat);color:var(--tot)}
.pb-buoc.canh_bao .pb-buoc-dau{background:var(--canh-nhat);color:var(--canh)}
.pb-buoc.khong_dat .pb-buoc-dau{background:var(--loi-nhat);color:var(--loi)}
.pb-buoc.dang .pb-buoc-dau{background:var(--nhan-nhat);color:var(--nhan)}
.pb-buoc.canh_bao{background:color-mix(in srgb,var(--canh-nhat) 60%,transparent) !important}
.pb-buoc.khong_dat{background:color-mix(in srgb,var(--loi-nhat) 60%,transparent) !important}
.pb-buoc-than{flex:1;min-width:0}
.pb-buoc-than b{font-size:13px;font-weight:600;color:var(--chu)}
.pb-buoc-chu{font-size:12px;color:var(--chu2);margin-top:2px;line-height:1.45}
.pb-trich{display:grid;grid-template-columns:1fr;gap:10px}
.pb-trich-cot{background:var(--the);border-radius:16px;padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.pb-trich-dau{font-size:12px;font-weight:700;color:var(--nhan);margin-bottom:4px}
.pb-nk .pb-kv{display:flex;justify-content:space-between;gap:12px;padding:6px 0;font-size:12.5px}
.pb-nk .pb-kv + .pb-kv{box-shadow:inset 0 1px 0 var(--nen)}
.pb-nk .pb-kv span{color:var(--chu3);flex:none}
.pb-nk .pb-kv b{text-align:right;font-weight:600;color:var(--chu);overflow-wrap:anywhere}
.pb-tra-cuu{display:flex;align-items:flex-start;gap:8px;margin:0;padding:10px 14px;border-radius:14px;font-size:12.5px;font-weight:600;
            background:var(--the)}
.pb-tra-cuu .pb-ico{width:17px;height:17px}
.pb-tra-cuu.tot{color:var(--tot)}
.pb-tra-cuu.canh{color:var(--canh)}
.pb-tra-cuu.loi{color:var(--loi)}
.pb-xm-nguon{display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:14px;background:var(--tot-nhat);
             color:var(--tot);font-size:13px;font-weight:600}

/* ---------- Tab gói: bảng cũ khoác áo khối trắng ---------- */
.pb-goi > .bang{background:var(--the);border-radius:var(--pb-bo);padding:8px}

/* ---------- ≤1100px: bốn ô thành hai hàng; hai khối xếp dọc ---------- */
@media (max-width:1100px){
  .pb-o-luoi{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pb-2cot{grid-template-columns:1fr}
}

/* ---------- ≤640px (điện thoại 390px): bảng gập thành thẻ, ngăn kéo toàn màn ---------- */
@media (max-width:640px){
  .pb{gap:16px}
  .pb .dau h2{font-size:22px}
  .pb-o-luoi{gap:10px}
  .pb .the.so.pb-o{padding:16px;gap:10px;border-radius:18px}
  .pb-o-so{font-size:20px}
  .pb-o-so small{font-size:13px}
  .pb-o-nhan{font-size:12px}
  .pb-o-dau{flex-direction:column;gap:6px}
  .pb-khoi{padding:18px 16px;border-radius:18px}
  .pb-khoi-sat{padding:6px}
  .pb-khoi-dau{flex-wrap:wrap}
  .pb-viec-dong{flex-wrap:wrap;padding:6px 6px 6px 14px}
  .pb-chip-gian{display:none}
  .pb-tab-nut{padding:0 14px}

  /* Bảng → danh sách thẻ: mỗi dòng một khối, ô đầu (tên) chiếm cả hàng, các ô sau là cặp
     nhãn : giá trị lấy nhãn từ `data-nhan`. Không cuộn ngang ở 390px. */
  .pb .bang thead{display:none}
  .pb .bang table,.pb .bang tbody{display:block}
  .pb .bang tbody tr{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:14px 12px;border-radius:16px;
                     box-shadow:inset 0 -1px 0 var(--nen)}
  .pb .bang tbody tr:last-child{box-shadow:none}
  .pb .bang tbody tr.dang{background:var(--nhan-nhat)}
  .pb .bang td{display:flex;align-items:baseline;gap:5px;padding:0;box-shadow:none !important;order:2;
               background:transparent !important;border-radius:0 !important;text-align:left !important;min-width:0;font-size:12.5px}
  .pb .bang td[data-nhan]:not([data-nhan=""])::before{content:attr(data-nhan);font-family:"Plus Jakarta Sans",system-ui,sans-serif;
               font-size:10.5px;font-weight:600;color:var(--chu3)}
  /* Hàng 1: tên (trái) + chip trạng thái (phải); hàng 2: các cặp nhãn–giá trị nhỏ nối tiếp. */
  .pb .bang td.pb-o-ten{order:0;flex:1 1 55%}
  .pb .bang td[data-nhan="Trạng thái"]{order:1;flex:none;margin-left:auto}
  .pb .bang td[data-nhan="Trạng thái"]::before{display:none}
  .pb .bang tbody tr::after{content:'';order:2;flex-basis:100%;height:0;margin-top:-8px}
  .pb .bang td[data-nhan]:not([data-nhan=""]){order:3}
  .pb .bang tbody td[data-nhan="Trạng thái"]:not([data-nhan=""]){order:1}
  .pb .bang td.pb-trong,.pb .bang td .pb-don{display:none}
  .pb .bang td.pb-o-nut{order:4;flex:1 1 100%;align-items:stretch}
  .pb .bang td.pb-o-nut:empty{display:none}
  .pb .bang td.pb-o-nut .pb-nut-chu{display:none}
  .pb .bang td.pb-o-nut .pb-nut-mem{width:100%}
  .pb .bang td .trong{flex:1 1 100%}
  .pb .bang td .pb-qm small{display:none}
  .pb .bang td .pb-tt-o{justify-content:flex-end}
  .pb-ten{min-width:0}

  .pb-nk{width:100%;border-radius:0}
  .pb-nk-hop{padding:0 14px 28px}
  .pb-nk-tieu{padding-top:18px}
  .pb-nk-luoi{grid-template-columns:1fr 1fr}
  .pb-hd-dong{grid-template-columns:1fr auto}
}

/* Ngăn kéo mở trên màn rộng: đẩy khu làm việc sang trái thay vì che danh sách — người xem vẫn
   thấy dòng đang mở được tô (Stitch 8 bày danh sách và ngăn kéo cạnh nhau). */
@media (min-width:1100px){
  body.pb-co-nk main.chinh{padding-right:calc(440px + 24px);transition:padding .2s}
}
.pb .bang td .pb-ten small .mono,.pb-qm small,.pb .bang td[data-nhan="Tài khoản"]{white-space:nowrap}
@media (min-width:1100px){
  /* Bảng hẹp lại khi ngăn kéo mở: bỏ cột phụ (dung lượng, lượt khám, hạn) để cột Trạng thái
     còn trong tầm mắt — chi tiết các cột ấy đã có trong ngăn kéo. */
  body.pb-co-nk .pb .bang th:nth-child(4),body.pb-co-nk .pb .bang td[data-nhan="Dung lượng"],
  body.pb-co-nk .pb .bang th:nth-child(5),body.pb-co-nk .pb .bang td[data-nhan="Lượt khám"],
  body.pb-co-nk .pb .bang th:nth-child(7),body.pb-co-nk .pb .bang td[data-nhan="Hạn gói"],
  body.pb-co-nk .pb .bang th:nth-child(8),body.pb-co-nk .pb .bang td.pb-o-nut{display:none}
  body.pb-co-nk .pb-tab-nut{padding:0 12px}
}
.pb-buoc.dat .pb-buoc-than b{font-weight:500;color:var(--chu2)}
.pb .bang td.mono{white-space:nowrap}
.pb-goi > .hang{margin-bottom:0 !important}
.pb-ten-gon{min-width:0}
.pb-ten-gon small{white-space:nowrap}
/* Ma trận gói × phân hệ: màn hẹp bỏ tiêu đề cột → mỗi công tắc mang tên gói của nó (QA 26/09). */
.pb-goi .pb-goi-ten{display:none}
@media (max-width:640px){.pb-goi .pb-goi-ten{display:inline;margin-right:6px;color:var(--chu3,#777)}}
.pb-nut-hang{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}