/* =====================================================================
   PikTools — giao diện MONO: trắng · đen · xám, kính mờ (glass), tối giản
   Nạp SAU CÙNG trên mọi trang. Màu duy nhất còn giữ: đỏ cho cảnh báo / lỗi.
   ===================================================================== */
:root{
  --ink:#0A0A0B; --ink2:#1D1D1F; --body:#3A3A3C; --muted:#6E6E73; --faint:#A1A1A6;
  --line:rgba(0,0,0,.08); --line2:rgba(0,0,0,.06); --bd:rgba(0,0,0,.08); --bd2:rgba(0,0,0,.12);
  --soft:#F2F2F4; --soft2:#F5F5F7; --mist:#F5F5F7; --cream:#F7F7F8; --lilac:#EDEDF0;
  --purple:#0A0A0B; --purple-d:#000; --brand:#5530FF;
  --glass:rgba(255,255,255,.68); --glass2:rgba(255,255,255,.82); --glass-bd:rgba(255,255,255,.7);
  --blur:saturate(180%) blur(22px);
  --sh1:0 1px 2px rgba(0,0,0,.04),0 4px 14px rgba(0,0,0,.04);
  --sh2:0 2px 6px rgba(0,0,0,.04),0 18px 40px rgba(0,0,0,.08);
  --sh3:0 30px 80px rgba(0,0,0,.18);
  --ring:0 0 0 4px rgba(0,0,0,.08);
  --ease:cubic-bezier(.2,.75,.2,1);
  --warn-bg:#FFECEF; --warn-tx:#C8102E; --warn-ic:#E5243B;
}
html{background:#fff}
body,body.admin{color:var(--ink);background:#fff;letter-spacing:-.005em}
/* nền có chiều sâu nhẹ để lớp kính có thứ để làm mờ */
body::before{display:none;content:"";position:fixed;inset:-20vh -10vw auto;height:120vh;z-index:-1;pointer-events:none;
  background:radial-gradient(40vw 40vw at 12% 8%,rgba(0,0,0,.045),transparent 60%),radial-gradient(36vw 36vw at 88% 18%,rgba(0,0,0,.035),transparent 62%),radial-gradient(50vw 40vw at 50% 100%,rgba(255,255,255,1),transparent 70%)}
::selection{background:rgba(0,0,0,.12)}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
a{transition:color .2s var(--ease),opacity .2s var(--ease)}

/* ---------- thanh thông báo + header kính ---------- */
.announce{background:#0A0A0B;color:#F5F5F7}
.announce .tag:not(.lime){background:rgba(255,255,255,.12)!important;color:#fff!important;border:1px solid rgba(255,255,255,.18)}
header.site{background:rgba(250,250,252,.7)!important;-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border-bottom:1px solid rgba(0,0,0,.06)!important;transition:background .3s var(--ease),box-shadow .3s var(--ease)}
header.site.scrolled{background:rgba(250,250,252,.82)!important;box-shadow:0 1px 0 rgba(0,0,0,.04),0 8px 30px rgba(0,0,0,.05)}
nav.main a{color:var(--body);font-weight:600;transition:background .2s var(--ease),color .2s var(--ease)}
nav.main a:hover{background:rgba(0,0,0,.05);color:var(--ink)}
nav.main a.on{background:#0A0A0B;color:#fff}
.lang{background:rgba(0,0,0,.05);border:0}
.lang button.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.menu-t{background:rgba(0,0,0,.05)!important}

/* ---------- nút: đen / kính, bo tròn, nhấn có phản hồi ---------- */
.btn{transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease)!important}
.btn:active{transform:scale(.97)!important}
.btn-primary,.btn-ink,.hbtn{background:#0A0A0B!important;color:#fff!important;border-color:#0A0A0B!important}
.btn-primary:hover,.btn-ink:hover,.hbtn:hover{background:#2C2C2E!important;box-shadow:0 6px 18px rgba(0,0,0,.18)!important}
.btn-ghost,.btn-soft,.btn-white{background:rgba(255,255,255,.75)!important;color:var(--ink)!important;border:1px solid rgba(0,0,0,.1)!important;-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
.btn-ghost:hover,.btn-soft:hover,.btn-white:hover{background:#fff!important;border-color:rgba(0,0,0,.22)!important}
.btn-danger{background:var(--warn-bg)!important;color:var(--warn-tx)!important;border:0!important}
.ibtn{transition:background .2s var(--ease),color .2s var(--ease),transform .2s var(--ease)}
.ibtn:hover{background:rgba(0,0,0,.06)}
.ibtn:active{transform:scale(.92)}

/* ---------- ô nhập ---------- */
.inp,input.inp,select.inp,textarea.inp,.kin{background:rgba(255,255,255,.85);border:1px solid rgba(0,0,0,.1)!important;transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.inp:focus,.kin:focus{border-color:rgba(0,0,0,.45)!important;box-shadow:var(--ring)!important;outline:0}
.bigsearch,.psearch{background:rgba(255,255,255,.75)!important;-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid rgba(0,0,0,.08)!important;box-shadow:var(--sh1)!important;transition:box-shadow .25s var(--ease),border-color .25s var(--ease)}
.bigsearch:focus-within,.psearch:focus-within{border-color:rgba(0,0,0,.3)!important;box-shadow:var(--sh2)!important}

/* ---------- thẻ & khung: kính trắng, viền mảnh, nổi nhẹ khi rê chuột ---------- */
.tcard,.rcard,.plcard,.accard,.nfcard,.mcard,.aucard{border:1px solid rgba(0,0,0,.07)!important;box-shadow:var(--sh1)}
.panel{background:rgba(255,255,255,.86)!important;-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid rgba(0,0,0,.06)!important}
.tcard,.rcard,.bcard,.pcard,.nfcard,.ecard,.gcard,.dcard,.vcard,.mkcard,.fcard,.scard,.mcard{transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease)!important}
.tcard:hover,.rcard:hover,.bcard:hover,.pcard:hover,.nfcard:hover,.ecard:hover,.gcard:hover,.dcard:hover,.vcard:hover,.mkcard:hover,.fcard:hover,.scard:hover,.mcard:hover{transform:translateY(-4px);box-shadow:var(--sh2)}
.rcard img,.tcard img,.mkcard img{transition:transform .6s var(--ease)}
.rcard:hover img,.mkcard:hover img{transform:scale(1.035)}

/* ---------- popup / hộp thoại: kính đậm, nền tối mờ ---------- */
.modal,.pikm,.rmodal .rmbg,.rmbg{background:rgba(0,0,0,.32)!important;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.modal .box,.pikm-box,.rmbox{background:#fff!important;-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid rgba(255,255,255,.7)!important;box-shadow:var(--sh3)!important}
body:not(.admin) :is(.pikm-box,.rmbox){animation:popIn .45s var(--ease) both}
@keyframes popIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.toast{background:rgba(28,28,30,.88)!important;color:#fff!important;-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:0!important;box-shadow:var(--sh2)!important}
.toast *{color:inherit!important}

/* ---------- chip / tab / bộ lọc ---------- */
.chip,.rchip,.rkwc,.ftab,.tabs button,.seg button,.pill,.rpills button,.kwck,.tgrp button,.ctabs button{transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
.chip.on,.rpills button.on,.tabs button.on,.ftab.on,.ctabs button.on,.kwck.on{background:#0A0A0B!important;color:#fff!important;border-color:#0A0A0B!important}
.seg{background:rgba(0,0,0,.05)!important}
.seg button.on{background:#fff!important;color:var(--ink)!important;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.rgrp .rchip{background:rgba(0,0,0,.05)!important;color:var(--ink)!important}
.rgrp .rchip:hover{background:rgba(0,0,0,.1)!important}
.rgrp .rkwc:hover{border-color:rgba(0,0,0,.3)!important;color:var(--ink)!important}

/* ---------- chi tiết tài nguyên: nút tải đen (PRO có viền khoá), nhãn kính ---------- */
.rdl2.is-free,.rdl2.is-pro{background:#0A0A0B!important;color:#fff!important}
.rdl2.is-free:hover,.rdl2.is-pro:hover{background:#2C2C2E!important;box-shadow:0 10px 26px rgba(0,0,0,.22)}
.rdlic,.rdl2.is-pro .rdlic{background:rgba(255,255,255,.14)!important;color:#fff!important}
.rcopy.ok{background:#0A0A0B!important;color:#fff!important;border-color:#0A0A0B!important}

/* ---------- công tắc / ô tích ---------- */
.switch input:checked+span::before,.switch input:checked{background:#0A0A0B!important;border-color:#0A0A0B!important}
input[type=checkbox]:checked,input[type=radio]:checked{accent-color:#0A0A0B}
.kwsug .on .ck,.kwck.on .ck{background:#0A0A0B!important;border-color:#0A0A0B!important}

/* ---------- cảnh báo / lỗi: giữ đỏ (màu chức năng duy nhất) ---------- */
.savebar .dirty,.dirtyn,.auerr,.notice.warn,.medit-foot .dirtyn{background:var(--warn-bg)!important;color:var(--warn-tx)!important}
.notice.warn svg,.auerr svg{color:var(--warn-ic)!important}
.notice{background:rgba(0,0,0,.04)!important;color:var(--body)!important}

/* ---------- quản trị ---------- */
body.admin{background:#F7F7F8}
.aside,.side,.anav{background:rgba(255,255,255,.72)!important;-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
.anav a.on,.aside a.on,.side a.on{background:#0A0A0B!important;color:#fff!important}
.sgh,.anav h4,.aside h4,.agrp>b{color:var(--muted)!important}
.sgh:hover{color:var(--ink)!important}
.side .it.on,.side a.it.on,aside .it.on{background:#0A0A0B!important;color:#fff!important}

/* ---------- chuyển động nhẹ khi hiện nội dung ----------
   Chỉ chạy 1 lần lúc mới mở trang (trước khi <html> có lớp pk-ready). Bấm lọc / sửa làm trang vẽ lại thì KHÔNG chạy lại → không giật. */
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
html:not(.pk-ready) body:not(.admin) :is(.tcard,.rcard,.bcard,.pcard,.nfcard,.ecard,.gcard,.vcard,.mkcard,.mcard,.plcard,.accard){animation:rise .6s var(--ease) both}
html:not(.pk-ready) body:not(.admin) :is(.tcard,.rcard,.bcard,.pcard,.nfcard,.ecard,.gcard,.vcard,.mkcard,.mcard,.plcard):nth-child(2){animation-delay:.04s}
html:not(.pk-ready) body:not(.admin) :is(.tcard,.rcard,.bcard,.pcard,.nfcard,.ecard,.gcard,.vcard,.mkcard,.mcard,.plcard):nth-child(3){animation-delay:.08s}
html:not(.pk-ready) body:not(.admin) :is(.tcard,.rcard,.bcard,.pcard,.nfcard,.ecard,.gcard,.vcard,.mkcard,.mcard,.plcard):nth-child(4){animation-delay:.12s}
html:not(.pk-ready) body:not(.admin) :is(.tcard,.rcard,.bcard,.pcard,.nfcard,.ecard,.gcard,.vcard,.mkcard,.mcard,.plcard):nth-child(n+5){animation-delay:.16s}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}


/* ---------- điểm nhấn giữ màu thương hiệu (không phải UI) ---------- */
.logo .mark,.slot.s1,.z-tools,.art .acts2 span.p,.dh-ph,.bpv.snd,.acav-t,.avatar{background:var(--brand)!important}

body.admin :is(.tcard,.rcard,.fcard,.pcard,.mcard):hover{transform:none}
.side a.it.on svg,aside .it.on svg{color:#fff!important}