/* ══ Page Banner (.pb) — หัวหน้าเพจพื้นดำมาตรฐานของ BizMGMT / DEKTHAI ══
   ใช้ได้ทุกพื้นที่ (Console · DEKTHAI ID · Store · POS · Goal · Money · PC Build · CheckShopee) — ไฟล์เดียว ไม่พึ่ง admin/dashboard/store/home.css
   โครง: .pb > (.pb-mark) (.pb-back) .pb-main > [.pb-text > eyebrow/title/desc/chips] + [.pb-side > right_html/.pb-actions] ; (.pb-tabs)
   วิธีใช้: includes/page_banner.php · เอกสาร: docs/PAGE_BANNER.md */
:where(header).pb{
  --pb-bg:var(--ash-dk,#0E0E10);--pb-line:var(--ash-dk-line,rgba(255,255,255,.09));
  --pb-ink:var(--ink,#0A0A0B);--pb-lime:var(--accent,#D4FF3E);--pb-lime-dk:var(--accent-dark,#B8E033);
  --pb-fg:#fff;--pb-fg2:rgba(255,255,255,.68);--pb-fg3:rgba(255,255,255,.6);
  --pb-pad:28px 30px;--pb-r:24px;--pb-mb:20px;
  position:relative;isolation:isolate;overflow:hidden;box-sizing:border-box;
  margin:0 0 var(--pb-mb);padding:var(--pb-pad);border-radius:var(--pb-r);
  font-family:'Prompt',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:14px;line-height:1.55;
  color:var(--pb-fg);border:1px solid var(--pb-line);
  background:radial-gradient(520px 220px at 100% -10%,rgba(212,255,62,.22),transparent 70%),radial-gradient(300px 160px at 0% 120%,rgba(212,255,62,.07),transparent 72%),var(--pb-bg);
  box-shadow:0 10px 28px -12px rgba(10,10,11,.45);
  animation:pb-in .7s cubic-bezier(.22,1,.36,1) both}
:where(header).pb *,:where(header).pb *::before,:where(header).pb *::after{box-sizing:border-box}
/* dot lattice — ใต้เนื้อหา จางลงด้านล่าง */
:where(header).pb::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(rgba(255,255,255,.085) 1px,transparent 1.3px) 0 0/20px 20px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 92%);mask-image:linear-gradient(180deg,#000,transparent 92%)}
@keyframes pb-in{from{opacity:0;transform:translateY(14px);filter:blur(8px)}to{opacity:1;transform:none;filter:blur(0)}}

/* watermark ไอคอนใหญ่ มุมขวาล่าง */
.pb-mark{position:absolute;right:-14px;bottom:-34px;z-index:-1;pointer-events:none;line-height:1;font-size:210px;color:#fff;opacity:.07;user-select:none}
.pb-mark i{display:block;font-size:inherit;line-height:1}

/* ลิงก์ย้อนกลับ */
.pb-back{display:inline-flex;align-items:center;gap:4px;margin:0 0 12px;font-size:13px;font-weight:500;color:rgba(255,255,255,.7);text-decoration:none;border-radius:8px;transition:color .15s}
.pb-back i{font-size:18px;line-height:1}
.pb-back:hover{color:#fff}

/* แถวหลัก: ข้อความซ้าย · ปุ่มขวา */
.pb-main{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px 28px;align-items:center}
.pb-text{min-width:0}
.pb-side{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:10px;min-width:0;max-width:100%}

.pb-eyebrow{display:inline-flex;align-items:center;gap:7px;max-width:100%;margin:0 0 12px;padding:5px 12px 5px 10px;border-radius:100px;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.12);color:#E8E9EC;
  font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;line-height:1.3;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.pb-eyebrow i{font-size:15px;line-height:1;color:var(--pb-lime);flex:none}
.pb-eyebrow span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.pb-title{margin:0;color:var(--pb-fg);font-weight:800;letter-spacing:-.03em;line-height:1.12;
  font-size:clamp(22px,1.2vw + 18px,32px);overflow-wrap:anywhere;text-wrap:balance}
.pb-title em,.pb-title .pb-thin{font-style:normal;font-weight:300}
.pb-desc{margin:8px 0 0;max-width:62ch;color:var(--pb-fg2);font-size:14.5px;line-height:1.55;font-weight:400}

/* ชิปสถิติ */
.pb-chips{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0;padding:0;list-style:none}
.pb-chip{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:5px 12px;border-radius:100px;white-space:nowrap;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.08);color:#E8E9EC;font-size:12.5px;font-weight:500;line-height:1.4;font-variant-numeric:tabular-nums}
.pb-chip i{font-size:15px;line-height:1;opacity:.85;flex:none}
.pb-chip b{font-weight:700;color:#fff}
.pb-chip--lime{background:var(--pb-lime);color:var(--pb-ink);border-color:transparent}
.pb-chip--lime b{color:var(--pb-ink)}
.pb-chip--good{background:rgba(16,185,129,.18);color:#6EE7B7}
.pb-chip--warn{background:rgba(245,158,11,.18);color:#FCD34D}
.pb-chip--danger{background:rgba(239,68,68,.2);color:#FCA5A5}
.pb-chip--info{background:rgba(59,130,246,.2);color:#93C5FD}

/* ปุ่ม */
.pb-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:10px;min-width:0}
.pb-btn{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:42px;padding:0 20px;border-radius:100px;border:1px solid transparent;
  background:var(--pb-lime);color:var(--pb-ink);font:inherit;font-size:14px;font-weight:700;line-height:1;text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:transform .18s cubic-bezier(.22,1,.36,1),background .15s,border-color .15s,box-shadow .15s}
.pb-btn i{font-size:18px;line-height:1;flex:none}
.pb-btn:hover{background:var(--pb-lime-dk);transform:translateY(-1px);box-shadow:0 8px 20px -8px rgba(212,255,62,.55)}
.pb-btn:active{transform:none}
.pb-btn--glass{background:rgba(255,255,255,.09);color:#fff;border-color:rgba(255,255,255,.18);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.pb-btn--glass:hover{background:rgba(255,255,255,.17);border-color:rgba(255,255,255,.32);box-shadow:none}
.pb-btn--ghost{background:transparent;color:rgba(255,255,255,.82);border-color:transparent;padding:0 14px}
.pb-btn--ghost:hover{background:rgba(255,255,255,.1);color:#fff;box-shadow:none}
.pb-btn[disabled],.pb-btn[aria-disabled="true"]{opacity:.5;pointer-events:none}

/* pill ยอดเงิน (wallet) แบบบาง */
.pb-pill{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 6px 0 14px;border-radius:100px;max-width:100%;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);color:#fff;text-decoration:none;font:inherit;font-size:13px;font-weight:500;line-height:1;white-space:nowrap;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:background .15s,border-color .15s}
a.pb-pill:hover{background:rgba(255,255,255,.17);border-color:rgba(255,255,255,.32)}
.pb-pill>i{font-size:18px;line-height:1;color:var(--pb-lime);flex:none}
.pb-pill small{font-size:11.5px;font-weight:500;color:var(--pb-fg3)}
.pb-pill b{font-weight:800;font-size:15px;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.pb-pill .pb-pill-add{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--pb-lime);color:var(--pb-ink);font-size:18px;flex:none}
.pb-pill:not(:has(.pb-pill-add)){padding-right:14px}

/* แท็บล่าง */
.pb-tabs{display:flex;gap:2px;margin:22px -30px -28px;padding:0 22px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;
  background:rgba(255,255,255,.035);border-top:1px solid rgba(255,255,255,.1)}
.pb-tabs::-webkit-scrollbar{display:none}
.pb-tab{position:relative;flex:none;display:inline-flex;align-items:center;gap:7px;padding:13px 14px;color:rgba(255,255,255,.66);font-size:13.5px;font-weight:500;line-height:1.2;text-decoration:none;white-space:nowrap;border-radius:8px;transition:color .15s}
.pb-tab i{font-size:17px;line-height:1;color:rgba(255,255,255,.45);transition:color .15s}
.pb-tab:hover{color:#fff}.pb-tab:hover i{color:#fff}
.pb-tab::after{content:"";position:absolute;left:12px;right:12px;bottom:0;height:2px;border-radius:2px;background:transparent;transition:background .15s}
.pb-tab:hover::after{background:rgba(255,255,255,.28)}
.pb-tab.on,.pb-tab[aria-current]{color:#fff;font-weight:700}
.pb-tab.on i,.pb-tab[aria-current] i{color:var(--pb-lime)}
.pb-tab.on::after,.pb-tab[aria-current]::after{background:var(--pb-lime);box-shadow:0 -2px 14px rgba(212,255,62,.8)}
.pb-tab-n{display:inline-block;min-width:20px;padding:1px 7px;border-radius:100px;background:rgba(255,255,255,.12);color:#fff;font-size:11px;font-weight:700;text-align:center;font-variant-numeric:tabular-nums}
.pb-tab.on .pb-tab-n{background:var(--pb-lime);color:var(--pb-ink)}

/* focus */
:where(header).pb a:focus-visible,:where(header).pb button:focus-visible,:where(header).pb summary:focus-visible{outline:2px solid var(--pb-lime);outline-offset:2px}
.pb-tab:focus-visible{outline-offset:-3px}

/* variants */
.pb--compact{--pb-pad:18px 22px;--pb-r:20px;--pb-mb:16px}
.pb--compact .pb-title{font-size:clamp(20px,.8vw + 17px,26px)}
.pb--compact .pb-eyebrow{margin-bottom:8px}
.pb--compact .pb-desc{margin-top:4px;font-size:14px}
.pb--compact .pb-chips{margin-top:12px}
.pb--compact .pb-mark{font-size:150px;bottom:-24px}
.pb--compact .pb-tabs{margin:16px -22px -18px;padding:0 14px}
.pb--compact .pb-btn{min-height:38px;padding:0 16px;font-size:13.5px}
.pb--flush{--pb-mb:0}
.pb--hero{--pb-pad:40px 40px 36px;--pb-r:28px;--pb-mb:24px;min-height:220px}
.pb--hero .pb-title{font-size:clamp(26px,2vw + 18px,44px);line-height:1.06}
.pb--hero .pb-desc{font-size:15.5px;margin-top:12px}
.pb--hero .pb-mark{font-size:300px;right:-24px;bottom:-60px}
.pb--hero .pb-main{align-items:end}
.pb--hero .pb-tabs{margin:28px -40px -36px;padding:0 32px}

/* responsive */
@media (max-width:900px){
  .pb-main{grid-template-columns:minmax(0,1fr)}
  .pb-side{justify-content:flex-start}
  .pb-actions{justify-content:flex-start}
}
@media (max-width:640px){
  :where(header).pb,.pb--compact,.pb--hero{--pb-pad:20px 18px 18px;--pb-r:18px;--pb-mb:16px}
  .pb--flush{--pb-mb:0}
  .pb--hero{min-height:0}
  .pb-desc{font-size:14px}
  .pb--hero .pb-title{font-size:clamp(24px,7vw,30px)}
  .pb-mark,.pb--hero .pb-mark,.pb--compact .pb-mark{font-size:130px;right:-10px;bottom:-22px}
  .pb-chips{flex-wrap:nowrap;overflow-x:auto;margin-left:-18px;margin-right:-18px;padding:0 18px 2px;scrollbar-width:none}
  .pb-chips::-webkit-scrollbar{display:none}
  .pb-chip{flex:none}
  .pb-side{width:100%}
  .pb-actions{width:100%}
  .pb-actions .pb-btn{flex:1 1 auto;min-width:0}
  .pb-pill{width:100%;justify-content:space-between}
  .pb-tabs,.pb--compact .pb-tabs,.pb--hero .pb-tabs{margin:18px -18px -18px;padding:0 8px}
}
@media (prefers-reduced-motion:reduce){
  :where(header).pb{animation:none}
  .pb-btn,.pb-tab,.pb-back,.pb-pill{transition:none}
  .pb-btn:hover{transform:none}
}
@media print{:where(header).pb{display:none}}