/* KIEMMONEY · pro-polish — lớp tinh chỉnh nạp sau cùng (chỉ thêm, không đổi bố cục) */
:root{--pp-focus:#2563eb}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-variant-numeric:tabular-nums;-webkit-tap-highlight-color:transparent}
::selection{background:#ffe17c;color:#000}

/* Viền focus rõ ràng cho người dùng bàn phím (trước đây gần như không có) */
:focus-visible{outline:3px solid var(--pp-focus)!important;outline-offset:2px!important}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline-offset:0!important}

/* Chữ gọn gàng hơn */
h1,h2,h3{text-wrap:balance}
p,li{text-wrap:pretty}
td,.muted{overflow-wrap:anywhere}

/* Chạm dễ hơn trên điện thoại */
button,[role="button"],a,select,input{touch-action:manipulation}
@media (pointer:coarse){
  select,input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]){min-height:44px}
  button.tab{min-height:44px}
}

/* Thanh cuộn mảnh trên máy tính */
@media (hover:hover) and (pointer:fine){
  *{scrollbar-width:thin;scrollbar-color:#171e19 transparent}
}

/* Trạng thái đang tải / rỗng thống nhất */
.public-loading{position:relative;overflow:hidden}
.public-loading::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);transform:translateX(-100%);animation:ppShimmer 1.4s ease-in-out infinite;pointer-events:none}
@keyframes ppShimmer{to{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){.public-loading::after{animation:none;display:none}html{scroll-behavior:auto}}
.public-empty{font-size:13px;line-height:1.5}

/* ===================== TRANG GIỚI THIỆU: logo + hiệu ứng động ===================== */
.intro-brand{position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;align-items:center;gap:16px;margin:0 0 22px;padding:clamp(22px,4vw,42px) clamp(14px,3vw,30px);background-color:#171e19;background-image:radial-gradient(circle,rgba(255,225,124,.16) 2px,transparent 2.5px);background-size:28px 28px;border:2px solid #000;border-radius:var(--nb-r-lg,14px);box-shadow:6px 6px 0 0 #000;animation:ppDots 9s linear infinite}
.intro-brand::before{content:"";position:absolute;left:50%;top:42%;width:min(78%,620px);aspect-ratio:2.4;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(255,196,40,.30),transparent 72%);filter:blur(8px);z-index:-1;animation:ppGlow 4.6s ease-in-out infinite}
.intro-brand::after{content:"";position:absolute;top:-25%;bottom:-25%;left:-45%;width:26%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.16),transparent);transform:skewX(-18deg);pointer-events:none;animation:ppShine 6s ease-in-out infinite}
.intro-brand-logo{display:block;width:min(100%,560px);height:auto;position:relative;z-index:1;filter:drop-shadow(0 8px 20px rgba(0,0,0,.5));animation:ppFloat 4.6s ease-in-out infinite}
.intro-chips{position:relative;z-index:1;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.intro-chips span{display:inline-block;padding:6px 12px;background:#ffe17c;color:#000;border:2px solid #000;border-radius:999px;box-shadow:2px 2px 0 0 #000;font-weight:800;font-size:13px;line-height:1.3;animation:ppChip .6s cubic-bezier(.2,.8,.2,1) both}
.intro-chips span:nth-child(2){animation-delay:.12s}.intro-chips span:nth-child(3){animation-delay:.24s}.intro-chips span:nth-child(4){animation-delay:.36s}
.ib-spark{position:absolute;z-index:1;color:#ffe17c;font-size:18px;line-height:1;opacity:0;pointer-events:none;animation:ppTwinkle 3.4s ease-in-out infinite}
.ib-s1{left:8%;top:16%}.ib-s2{right:10%;top:12%;animation-delay:1.1s;font-size:24px}.ib-s3{left:16%;bottom:24%;animation-delay:2s;font-size:14px}.ib-s4{right:18%;bottom:20%;animation-delay:.6s}
.ib-coin{position:absolute;z-index:0;bottom:-20px;width:16px;height:16px;border-radius:50%;background:#ffbc2e;border:2px solid #000;box-shadow:inset -3px -3px 0 rgba(0,0,0,.2);opacity:0;pointer-events:none;animation:ppCoin 7s linear infinite}
.ib-c1{left:12%}.ib-c2{left:34%;animation-delay:2.3s;width:12px;height:12px}.ib-c3{left:62%;animation-delay:4.1s}.ib-c4{left:86%;animation-delay:1.2s;width:12px;height:12px}

@keyframes ppDots{to{background-position:56px 28px}}
@keyframes ppGlow{0%,100%{opacity:.55;scale:.94}50%{opacity:1;scale:1.06}}
@keyframes ppShine{0%,55%{left:-45%}100%{left:135%}}
@keyframes ppFloat{0%,100%{translate:0 0}50%{translate:0 -6px}}
@keyframes ppTwinkle{0%,100%{opacity:0;scale:.4;rotate:0deg}50%{opacity:1;scale:1;rotate:45deg}}
@keyframes ppCoin{0%{translate:0 0;opacity:0}10%{opacity:1}90%{opacity:1}100%{translate:0 -300px;opacity:0}}
@keyframes ppChip{from{opacity:0;translate:0 10px;scale:.9}to{opacity:1;translate:0 0;scale:1}}
@keyframes ppFadeUp{from{opacity:0;translate:0 22px}to{opacity:1;translate:0 0}}
@keyframes ppBreath{0%,100%{scale:1}50%{scale:1.035}}
@keyframes ppBob{0%,100%{translate:0 0}50%{translate:0 -3px}}
@keyframes ppWiggle{0%,100%{rotate:0deg}25%{rotate:-12deg}75%{rotate:12deg}}
@keyframes ppPop{0%{scale:1}50%{scale:1.3}100%{scale:1}}

/* Hiện dần khi cuộn tới (trang giới thiệu của thành viên + khách) */
.intro-page :is(.intro-highlight,.intro-feature,.intro-prize,.intro-steps li,.intro-footer,h2),
.guest-intro-details :is(.guest-intro-heading,.guest-intro-card,.guest-intro-how li,.guest-intro-closing){animation:ppFadeUp .6s cubic-bezier(.2,.7,.2,1) both}
.intro-grid>:nth-child(2),.intro-steps li:nth-child(2),.guest-intro-grid>:nth-child(2){animation-delay:.08s!important}
.intro-grid>:nth-child(3),.intro-steps li:nth-child(3),.guest-intro-grid>:nth-child(3){animation-delay:.16s!important}
.intro-grid>:nth-child(4),.intro-steps li:nth-child(4){animation-delay:.24s!important}
.intro-grid>:nth-child(5){animation-delay:.32s!important}.intro-grid>:nth-child(6){animation-delay:.4s!important}
@supports (animation-timeline:view()){
  .intro-page :is(.intro-highlight,.intro-feature,.intro-prize,.intro-steps li,.intro-footer,h2),
  .guest-intro-details :is(.guest-intro-heading,.guest-intro-card,.guest-intro-how li,.guest-intro-closing){animation:ppFadeUp linear both;animation-timeline:view();animation-range:entry 0% entry 45%;animation-delay:0s!important}
}

/* Tương tác khi rê chuột / chạm */
.intro-page :is(.intro-feature,.intro-prize){transition:transform .2s ease,box-shadow .2s ease}
.intro-icon{animation:ppBob 3.2s ease-in-out infinite}
.intro-grid>:nth-child(2) .intro-icon{animation-delay:.5s}.intro-grid>:nth-child(3) .intro-icon{animation-delay:1s}
.intro-actions .btn:not(.ghost),.intro-footer .btn{animation:ppBreath 2.8s ease-in-out infinite}
@media (hover:hover){
  .intro-page :is(.intro-feature,.intro-prize):hover{transform:translate(-3px,-3px);box-shadow:var(--nb-sh-lg,8px 8px 0 0 #000)!important}
  .intro-page .intro-feature:hover .intro-icon{animation:ppWiggle .6s ease}
  .intro-page .intro-prize:hover>span{animation:ppPop .5s ease}
}
@media (max-width:560px){.intro-brand{box-shadow:4px 4px 0 0 #000}.ib-s2,.ib-s4{display:none}.intro-chips span{font-size:12px;padding:5px 10px}}

@media (prefers-reduced-motion:reduce){
  .intro-brand,.intro-brand::before,.intro-brand::after,.intro-brand-logo,.intro-chips span,.ib-spark,.intro-icon,.intro-actions .btn,.intro-footer .btn,
  .intro-page :is(.intro-highlight,.intro-feature,.intro-prize,.intro-steps li,.intro-footer,h2),
  .guest-intro-details :is(.guest-intro-heading,.guest-intro-card,.guest-intro-how li,.guest-intro-closing){animation:none!important}
  .ib-spark{opacity:.8}.ib-coin{display:none}
}

/* Logo ở trang khách: chữ trắng của logo cần nền tối, đặt vào khung charcoal để luôn đọc rõ (sáng & tối) */
.kp-logo{box-sizing:border-box!important;width:min(100%,300px)!important;max-width:100%!important;height:auto!important;max-height:none!important;padding:10px 16px!important;background:#171e19;border:2px solid #000;border-radius:var(--nb-r,10px);box-shadow:3px 3px 0 0 #000;margin:0 0 14px!important}

/* ==========================================================================
   Bảng xếp hạng (lbx-*) đồng bộ giao diện Neo-Brutalist: viền 2px, bóng cứng,
   vàng #ffe17c / charcoal, tự đổi theo light/dark qua biến --nb-*
   ========================================================================== */
html body #leaderboard .lbx-loading{padding:26px 14px;text-align:center;color:var(--nb-muted,#4b5563);font-weight:700;background:var(--nb-surface,#fff);border:2px dashed var(--nb-line,#000);border-radius:var(--nb-r,10px)}
html body #leaderboard .lbx-av{width:44px;height:44px;border-radius:50%;background:var(--nb-yellow,#ffe17c);border:2px solid #000;box-shadow:2px 2px 0 0 #000;color:#000}
html body #leaderboard .lbx-av.big{width:72px;height:72px;font-size:36px;border-width:2px;box-shadow:3px 3px 0 0 #000}
html body #leaderboard .lbx-pod.r1 .lbx-av.big{width:90px;height:90px;font-size:44px;border-color:#000;box-shadow:4px 4px 0 0 #000}
html body #leaderboard .lbx-podium{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:10px;align-items:end;margin:26px 0 16px;padding:18px 12px 0;border-radius:var(--nb-r-lg,14px);background:var(--nb-yellow,#ffe17c);background-image:var(--nb-dots);background-size:32px 32px;border:2px solid #000;box-shadow:var(--nb-sh,4px 4px 0 0 #000);overflow:visible}
html body #leaderboard .lbx-pod{color:#000;padding-top:30px}
html body #leaderboard .lbx-crown{filter:none;top:-32px}
html body #leaderboard .lbx-badge{background:#000;color:var(--nb-yellow,#ffe17c);border:2px solid #000;box-shadow:none;width:26px;height:26px}
html body #leaderboard .lbx-name{color:#000}
html body #leaderboard .lbx-val{color:#000;font-family:var(--nb-head,inherit)}
html body #leaderboard .lbx-val small{color:#171e19}
html body #leaderboard .lbx-reward{background:#000;color:var(--nb-yellow,#ffe17c);border-radius:999px;border:2px solid #000}
html body #leaderboard .lbx-base{background:#fff;border:2px solid #000;border-bottom:0;border-radius:10px 10px 0 0;color:#000}
html body #leaderboard .lbx-pod.r1 .lbx-base{background:#171e19;color:var(--nb-yellow,#ffe17c)}
html body #leaderboard .lbx-pod.r2 .lbx-base,html body #leaderboard .lbx-pod.r3 .lbx-base{background:#fff}
html body #leaderboard .lbx-row{background:var(--nb-surface,#fff);color:var(--nb-text,#000);border:2px solid var(--nb-line,#000);border-radius:var(--nb-r,10px);box-shadow:var(--nb-sh,4px 4px 0 0 #000)}
html body #leaderboard .lbx-rank{color:var(--nb-text,#000);font-family:var(--nb-head,inherit)}
html body #leaderboard .lbx-info b,html body #leaderboard .lbx-score b{color:var(--nb-text,#000)}
html body #leaderboard .lbx-info small,html body #leaderboard .lbx-score small{color:var(--nb-muted,#4b5563)}
html body #leaderboard .lbx-bar{background:var(--nb-bg,#fff);border:2px solid var(--nb-line,#000);height:10px}
html body #leaderboard .lbx-bar i{background:var(--nb-yellow,#ffe17c);border-right:2px solid var(--nb-line,#000)}
html body #leaderboard .lbx-score em{color:var(--nb-text,#000);background:var(--nb-yellow,#ffe17c);border:2px solid #000;border-radius:999px;padding:1px 7px;display:inline-block;margin-top:3px;color:#000}
html body #leaderboard .lbx-me{background:var(--nb-yellow,#ffe17c);color:#000;border:2px solid #000;border-radius:var(--nb-r-lg,14px);box-shadow:var(--nb-sh,4px 4px 0 0 #000)}
html body #leaderboard .lbx-me *{color:#000}
html[data-theme="dark"] body #leaderboard .lbx-row,html[data-theme="dark"] #leaderboard .lbx-row{box-shadow:4px 4px 0 0 var(--nb-line)}
html[data-theme="dark"] #leaderboard .lbx-podium,html[data-theme="dark"] #leaderboard .lbx-me{box-shadow:4px 4px 0 0 var(--nb-line);border-color:#000}
html body #leaderboard #lbLinksBtn,html body #leaderboard #lbMoneyBtn{border-radius:var(--nb-r,10px)!important;border:2px solid var(--nb-line,#000)!important;box-shadow:var(--nb-sh,4px 4px 0 0 #000)!important;background:var(--nb-surface,#fff)!important;color:var(--nb-text,#000)!important}
html body #leaderboard .lbx-on{background:var(--nb-yellow,#ffe17c)!important;color:#000!important;border-color:#000!important;box-shadow:2px 2px 0 0 #000!important}
@media(max-width:520px){html body #leaderboard .lbx-podium{gap:6px;padding:16px 6px 0}html body #leaderboard .lbx-av.big{width:58px;height:58px;font-size:28px}html body #leaderboard .lbx-pod.r1 .lbx-av.big{width:72px;height:72px}}

/* Hoạt động gần đây: Top kiếm Money hôm nay */
.ra2-sec{margin-top:12px}.ra2-sec:first-child{margin-top:0}
.ra2-sec h4{margin:0 0 8px;font-size:14px}
.ra2-row.ra2-top{border:2px solid var(--nb-line,#000)}
.ra2-rank{flex:none;min-width:34px;font-weight:900;font-family:var(--nb-head,inherit);text-align:center}
.ra2-row.ra2-top.r1{background:var(--nb-yellow,#ffe17c)!important;color:#000}
.ra2-row.ra2-top.r1 *{color:#000!important}

/* Thông báo (Admin / hệ thống) — đồng bộ Neo-Brutalist */
#notifications .notification-list{display:grid;gap:14px;margin-top:16px}
#notifications .notification-item{display:grid;gap:6px;padding:14px 16px;background:var(--nb-surface,#fff);color:var(--nb-text,#000);border:2px solid var(--nb-line,#000);border-radius:var(--nb-r,10px);box-shadow:var(--nb-sh,4px 4px 0 0 #000);cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}
#notifications .notification-item:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 0 var(--nb-line,#000)}
#notifications .notification-item.pinned{cursor:default;background:var(--nb-yellow,#ffe17c);color:#000;border-color:#000}
#notifications .notification-item.pinned:hover{transform:none;box-shadow:var(--nb-sh,4px 4px 0 0 #000)}
#notifications .notification-item.unread:before{display:none}
#notifications .notification-item.unread:not(.pinned){background:var(--nb-surface,#fff);border-left-width:8px;border-left-color:var(--nb-yellow,#ffe17c)}
html[data-theme="dark"] #notifications .notification-item.unread:not(.pinned){border-left-color:var(--nb-yellow,#ffe17c)}
#notifications .notification-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
#notifications .notification-tag{display:inline-flex;align-items:center;padding:2px 9px;font-size:11px;font-weight:900;border:2px solid #000;border-radius:999px;background:#fff;color:#000}
#notifications .notification-item.is-admin .notification-tag{background:#171e19;color:var(--nb-yellow,#ffe17c)}
#notifications .notification-item.pinned .notification-tag{background:#000;color:var(--nb-yellow,#ffe17c)}
#notifications .notification-title{font-family:var(--nb-head,inherit);font-weight:900;font-size:15px;color:inherit!important}
#notifications .notification-message{margin:0;font-size:13.5px;line-height:1.6;color:inherit!important;white-space:pre-line;overflow-wrap:anywhere}
#notifications .notification-time{margin:0;font-size:11px;color:var(--nb-muted,#4b5563)!important}
#notifications .notification-item.pinned :is(.notification-time,.notification-message,.notification-title){color:#000!important}
#notifications .notification-unread-dot{display:inline-block;width:10px;height:10px;margin-left:8px;border-radius:50%;background:var(--nb-red,#ff5f57);border:2px solid #000}

/* Biểu đồ "Nhiệm vụ đã làm": 3 nguồn, 3 màu (nền vòng do JS tô conic-gradient) */
:root{--src-main:#ffe17c;--src-offer:#7cc4ff;--src-cash:#ff8f7a}
#overview .home-task-ring{background:conic-gradient(var(--src-main) 0 100%)}
html body .income-source.main-income i{background:var(--src-main)!important}
html body .income-source.offerwall-income i{background:var(--src-offer)!important}
html body .income-source.cashback-income i{background:var(--src-cash)!important}
html body .income-source b{margin-left:2px;font-family:var(--nb-head,inherit)}