.pf-modal{z-index:2100;background:#0f172a8c;justify-content:center;align-items:flex-start;padding:48px 16px;display:flex;position:fixed;inset:0;overflow-y:auto}.pf-card{color:#1f2937;background:#fff;border-radius:22px;width:min(440px,100%);padding:0 22px 20px;position:relative;overflow:hidden;box-shadow:0 24px 60px #0000004d}.pf-card h2,.pf-card h3,.pf-card p{margin:0}.pf-close{z-index:3;cursor:pointer;background:#ffffffd9;border:0;border-radius:50%;width:32px;height:32px;font-size:14px;position:absolute;top:10px;right:10px}.pf-loading{place-items:center;padding:60px 0;display:grid}.pf-err{color:#991b1b;background:#fee2e2;border-radius:10px;margin-top:10px;padding:8px 12px;font-size:13px}.pf-banner{background:url(/trangnguyen/images/background/streak.bg.png) 50%/cover no-repeat,linear-gradient(135deg,#b91c1c,#f59e0b);height:96px;margin:0 -22px}.pf-avatar{width:112px;margin:-64px auto 0;position:relative}.pf-online{z-index:3;background:#22c55e;border:3px solid #fff;border-radius:50%;width:16px;height:16px;position:absolute;bottom:8px;right:8px}.pf-head{text-align:center;margin-top:12px}.pf-head h2{font-size:21px;font-weight:800}.pf-head h2 small{color:#6b7280;font-size:14px;font-weight:500}.pf-head .tn-title-badge{margin:6px 0 0}.pf-head p{color:#374151;margin-top:6px;font-size:14px}.pf-muted{color:#6b7280!important;font-size:13px!important}.pf-stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:16px;display:grid}.pf-stats div{text-align:center;background:#fff7ed;border-radius:12px;flex-direction:column;align-items:center;gap:2px;padding:10px 4px;display:flex}.pf-stats b{color:#1f2937;white-space:nowrap;font-size:16px;font-weight:800}.pf-stats small{color:#6b7280;font-size:11px}.pf-sec{margin-top:16px}.pf-sec h3{margin-bottom:8px;font-size:14px;font-weight:800}.pf-sec h3 small{color:#6b7280;font-weight:500}.pf-equip{grid-template-columns:1fr 1fr;gap:8px;display:grid}.pf-equip span{color:#9ca3af;border:1px dashed #e5e7eb;border-radius:12px;align-items:center;gap:6px;padding:8px 10px;font-size:13px;display:flex}.pf-equip .on{color:#92400e;background:#fffbeb;border:1px solid #fcd34d;font-weight:700}.pf-equip i{font-style:normal}.pf-items{grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px;display:grid}.pf-item{text-align:center;background:#fffcf8;border:1px solid #f3e8da;border-radius:12px;flex-direction:column;align-items:center;gap:6px;padding:12px 6px 8px;display:flex;position:relative}.pf-item>i{font-size:28px;font-style:normal;line-height:36px}.pf-item small{color:#374151;font-size:11px;line-height:1.3}.pf-item em{color:#fff;white-space:nowrap;background:#16a34a;border-radius:99px;padding:0 6px;font-size:10px;font-style:normal;font-weight:800;position:absolute;top:-7px;left:50%;transform:translate(-50%)}.pf-item.eq{background:#f0fdf4;border-color:#86efac}.pf-badges{flex-wrap:wrap;gap:6px;display:flex}.pf-badges span{color:#92400e;background:#fef3c7;border-radius:99px;padding:4px 10px;font-size:12px;font-weight:600}.pf-actions{flex-wrap:wrap;justify-content:center;gap:8px;margin-top:18px;display:flex}.pf-btn{color:#1f2937;font:inherit;cursor:pointer;background:#fff;border:1px solid #e5e7eb;border-radius:12px;align-items:center;gap:6px;padding:9px 16px;font-size:14px;font-weight:700;text-decoration:none;display:inline-flex}.pf-btn:hover{border-color:#fca5a5}.pf-btn.primary{color:#fff;background:linear-gradient(135deg,#dc2626,#b91c1c);border-color:#c1272d}.pf-btn:disabled{opacity:.6;cursor:default}.pf-tag{color:#166534;background:#f0fdf4;border-radius:12px;align-items:center;padding:9px 14px;font-size:14px;font-weight:700;display:inline-flex}@media (max-width:420px){.pf-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}.tn-clickable{cursor:pointer;transition:background .15s,transform .15s}.tn-clickable:hover{filter:brightness(.98)}.tn-clickable:focus-visible{outline-offset:2px;outline:2px solid #c1272d}.pf-link{margin-top:16px}
.bc-overlay{z-index:2000;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:radial-gradient(circle at 50% 40%,#ffd66640,#110c06b8 60%);grid-template-columns:minmax(0,1fr);place-items:center;padding:70px 16px 24px;animation:.25s ease-out bc-fade;display:grid;position:fixed;inset:0;overflow-y:auto}@keyframes bc-fade{0%{opacity:0}}.bc-card{--gold:#f6c143;--gold-2:#d99a1b;--red:#c81e1e;--ink:#5b2c0b;--panel:#fff8ea;--panel-line:#f2d9a6;box-sizing:border-box;text-align:center;width:100%;max-width:820px;color:var(--ink);border:6px solid var(--gold);box-shadow:0 0 0 3px #fff3cf inset,0 0 0 2px var(--gold-2),0 30px 80px #00000073,0 0 80px #f6c14373;background:radial-gradient(circle at 50% 38%,#fffdf6 0%,#fdf1d8 55%,#f8e3b8 100%);border-radius:26px;padding:92px 34px 24px;animation:.55s cubic-bezier(.2,1.4,.4,1) bc-pop;position:relative}.bc-card:after{content:"";pointer-events:none;opacity:.25;background:url(/trangnguyen/images/icy_butterfly_bird_overlay-yellow.svg) left -40px bottom -40px/260px no-repeat,url(/trangnguyen/images/icy_butterfly_bird_overlay-yellow.svg) right -60px top 40px/220px no-repeat;border-radius:20px;position:absolute;inset:0}.bc-card>*{z-index:1;position:relative}@keyframes bc-pop{0%{opacity:0;transform:scale(.6)translateY(30px)}to{opacity:1;transform:none}}.bc-crown{clip-path:polygon(0 100%,8% 40%,25% 70%,38% 15%,50% 0,62% 15%,75% 70%,92% 40%,100% 100%);filter:drop-shadow(0 4px 10px #d99a1b99);background:radial-gradient(circle at 50% 100%,#fff4c4 0 18%,#0000 19%),linear-gradient(#ffe58a,#e3a51e);width:150px;height:60px;top:-44px;left:50%;transform:translate(-50%);position:absolute!important}.bc-ribbon{width:min(460px,86%);top:-14px;left:50%;transform:translate(-50%);z-index:2!important;position:absolute!important}.bc-ribbon span{letter-spacing:.02em;color:#fff4d6;text-shadow:0 3px #7f0d14;background:linear-gradient(#e53935,#a3131b);border:2px solid #f8c452;border-radius:10px;padding:12px 20px;font-size:clamp(26px,4.4vw,40px);font-weight:900;display:block;box-shadow:0 6px #7f0d14,0 10px 20px #7f0d1459}.bc-ribbon:before,.bc-ribbon:after{content:"";z-index:-1;background:linear-gradient(#c62828,#8e1018);width:64px;height:50px;position:absolute;top:18px}.bc-ribbon:before{clip-path:polygon(0 0,100% 0,100% 100%,0 100%,22% 50%);left:-46px}.bc-ribbon:after{clip-path:polygon(0 0,100% 0,78% 50%,100% 100%,0 100%);right:-46px}.bc-close{border:4px solid var(--gold);width:52px;height:52px;color:var(--red);cursor:pointer;background:#fff;border-radius:50%;font-size:24px;font-weight:900;top:-18px;right:-18px;box-shadow:0 6px 16px #00000040;z-index:3!important;position:absolute!important}.bc-close:hover{transition:transform .2s;transform:rotate(90deg)}.bc-sub{color:var(--ink);margin:0;font-size:20px;font-weight:800}.bc-title{letter-spacing:.01em;color:#9b1c1c;text-shadow:0 2px #fff3cf;margin:2px 0 6px;font-size:clamp(30px,5.4vw,52px);font-weight:900;line-height:1.1}.bc-body{grid-template-columns:1fr minmax(220px,280px) 1fr;align-items:center;gap:12px;min-height:250px;display:grid}.bc-mascot{filter:drop-shadow(0 12px 18px #00000040);justify-self:start;width:100%;max-width:230px;margin-left:-70px;animation:2.4s ease-in-out infinite bc-bob}@keyframes bc-bob{0%,to{transform:translateY(0)rotate(-2deg)}50%{transform:translateY(-8px)rotate(2deg)}}.bc-badge{flex-direction:column;align-items:center;padding-top:6px;display:flex;position:relative}.bc-badge img{object-fit:contain;filter:drop-shadow(0 10px 18px #0000004d);width:190px;height:190px;animation:.8s cubic-bezier(.2,1.6,.4,1) .15s both bc-badge-in;position:relative}@keyframes bc-badge-in{0%{transform:scale(0)rotate(-30deg)}to{transform:none}}.bc-rays{pointer-events:none;background:repeating-conic-gradient(#ffd54f8c 0 8deg, transparent 8deg 20deg);border-radius:50%;width:420px;height:420px;margin:-210px 0 0 -210px;animation:14s linear infinite bc-spin;position:absolute;top:100px;left:50%;-webkit-mask-image:radial-gradient(circle,#000 25%,#0000 68%);mask-image:radial-gradient(circle,#000 25%,#0000 68%)}.bc-glow{background:radial-gradient(circle,#fff6c9 0%,#ffd66699 40%,#0000 70%);border-radius:50%;width:230px;height:230px;margin:-115px 0 0 -115px;animation:2s ease-in-out infinite bc-pulse;position:absolute;top:100px;left:50%}@keyframes bc-spin{to{transform:rotate(360deg)}}@keyframes bc-pulse{0%,to{opacity:.8;transform:scale(.92)}50%{opacity:1;transform:scale(1.08)}}.bc-name{white-space:nowrap;text-overflow:ellipsis;text-transform:uppercase;color:#fff;text-shadow:0 2px #163b80;background:linear-gradient(#2f6fd6,#1d4ea8);border:2px solid #ffe08a;border-radius:8px;max-width:300px;margin-top:-18px;padding:6px 22px;font-size:21px;font-weight:900;position:relative;overflow:hidden;box-shadow:0 5px #163b80}.bc-tier{border:1px solid var(--panel-line);background:#fff;border-radius:99px;margin-top:10px;padding:3px 12px;font-size:13px;font-weight:800;position:relative}.tier-1 .bc-tier{color:#9a5b2d}.tier-2 .bc-tier{color:#475569}.tier-3 .bc-tier{color:#b45309}.tier-1 .bc-name{text-shadow:0 2px #6f3f1d;background:linear-gradient(#c7834f,#9a5b2d);box-shadow:0 5px #6f3f1d}.tier-2 .bc-name{text-shadow:0 2px #475569;background:linear-gradient(#94a3b8,#64748b);box-shadow:0 5px #475569}.tier-3 .bc-name{text-shadow:0 2px #3b1580;background:linear-gradient(#7c3aed,#5b21b6);box-shadow:0 5px #3b1580}.bc-info{border:1px solid var(--panel-line);background:#ffffffb3;border-radius:18px;justify-self:stretch;padding:18px 16px;font-size:15px;line-height:1.5}.bc-info p{margin:0}.bc-info b{color:var(--red);font-size:1.25em}.bc-info h3{margin:0 0 6px;font-size:17px;font-weight:900}.bc-info ul{text-align:left;flex-direction:column;gap:6px;margin:0;padding:0;font-size:14px;font-weight:700;list-style:none;display:flex}.bc-step{font-size:17px;font-weight:700}.bc-cheer{font-weight:700;margin-top:6px!important}.bc-divider{background:radial-gradient(circle, var(--gold-2) 3px, transparent 4px) center/12px 10px no-repeat,linear-gradient(90deg, transparent, var(--gold-2), transparent) center/100% 1px no-repeat;width:70%;height:10px;margin:10px auto;display:block}.bc-rewards-head{margin:14px 0 10px}.bc-rewards-head span{letter-spacing:.03em;color:var(--ink);font-size:16px;font-weight:900}.bc-rewards-head span:before{content:"→ ";color:var(--gold-2)}.bc-rewards-head span:after{content:" ←";color:var(--gold-2)}.bc-rewards{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}.bc-reward{border:2px solid var(--panel-line);background:#fffdf6;border-radius:16px;flex-direction:column;justify-content:center;align-items:center;gap:6px;width:126px;min-height:112px;padding:12px 8px;animation:.5s cubic-bezier(.2,1.5,.4,1) both bc-reward-in;display:flex;box-shadow:0 6px 14px #92400e1a}.bc-reward img{object-fit:contain;width:56px;height:56px}.bc-reward b{color:var(--ink);font-size:16px;font-weight:900;line-height:1.2}.bc-reward-emoji{font-size:46px;line-height:1}@keyframes bc-reward-in{0%{opacity:0;transform:translateY(20px)scale(.8)}to{opacity:1;transform:none}}.bc-cta{width:min(420px,100%);height:64px;font:inherit;color:#fff;cursor:pointer;text-shadow:0 2px #7f1d1d;background:linear-gradient(#ef4444,#b91c1c);border:4px solid #f8c452;border-radius:99px;margin:18px auto 0;font-size:28px;font-weight:900;display:block;box-shadow:0 6px #7f1d1d,0 14px 24px #7f1d1d59}.bc-cta:hover:not(:disabled){filter:brightness(1.06);transform:translateY(-1px)}.bc-cta:active:not(:disabled){transform:translateY(3px);box-shadow:0 3px #7f1d1d}.bc-cta:disabled{opacity:.75}.bc-count{color:#8a5a2b;margin:10px 0 0;font-size:13px}.bc-count a{color:var(--red);font-weight:800}.bc-confetti{pointer-events:none;border-radius:20px;inset:0;overflow:hidden;z-index:0!important;position:absolute!important}.bc-confetti i{opacity:.9;border-radius:2px;width:9px;height:14px;animation:linear infinite bc-fall;position:absolute;top:-20px}@keyframes bc-fall{0%{transform:translateY(-20px) rotate(var(--r))}to{transform:translateY(720px) rotate(calc(var(--r) + 540deg))}}.bc-card.legend{--ink:#fff3d6;--panel-line:#f6c14380;background:radial-gradient(circle at 50% 35%,#5b2a8c 0%,#34145a 50%,#1f0b3a 100%);border-color:#f6c143;box-shadow:inset 0 0 0 3px #ffe08a,0 0 0 2px #b8860b,0 30px 80px #0000008c,0 0 90px #a855f78c}.bc-card.legend .bc-sub{color:#fde68a;font-size:18px}.bc-card.legend .bc-title{background:linear-gradient(#fff7c2,#f6c143 55%,#d08a0f);color:#0000;text-shadow:none;filter:drop-shadow(0 3px #6b3a06);-webkit-background-clip:text;background-clip:text}.bc-card.legend .bc-rays{background:repeating-conic-gradient(#ffd54f80 0 8deg, transparent 8deg 20deg)}.bc-card.legend .bc-glow{background:radial-gradient(circle,#fff6c9 0%,#c084fcb3 40%,#0000 70%)}.bc-card.legend .bc-name{text-shadow:0 2px #3b1580;background:linear-gradient(#8b5cf6,#5b21b6);box-shadow:0 5px #3b1580}.bc-card.legend .bc-tier{color:#fde68a;background:#ffffff1f;border-color:#fde68a80}.bc-card.legend .bc-info{color:#f5ead6;background:#1406288c}.bc-card.legend .bc-info h3{color:#fde68a}.bc-card.legend .bc-info b{color:#fde68a;font-size:1em}.bc-card.legend .bc-reward{background:linear-gradient(#5b2a8ce6,#34145ae6);border-color:#f6c14399}.bc-card.legend .bc-reward b{color:#fff3d6}.bc-card.legend .bc-rewards-head span{color:#fde68a}.bc-card.legend .bc-cta{color:#6b2c00;text-shadow:0 1px #ffe9a8;background:linear-gradient(#ffe58a,#f2b01e);border-color:#fff1b8;box-shadow:0 6px #a86b05,0 14px 30px #f6c14373}.bc-card.legend .bc-count{color:#e9d5ff}.bc-card.legend .bc-count a{color:#fde68a}.bc-card.legend .bc-badge img{width:170px;height:170px}.bc-card.legend .bc-reward{width:118px;min-height:104px}.bc-card.legend .bc-reward img{width:48px;height:48px}.bc-card.legend .bc-reward b{font-size:14px}.bc-card.legend:after{opacity:.12}@media (max-width:720px){.bc-overlay{padding-top:60px}.bc-card{padding:66px 16px 20px}.bc-body{grid-template-columns:1fr;min-height:0}.bc-mascot{z-index:2;width:110px;margin:0;position:absolute;top:-10px;left:-30px}.bc-badge img{width:150px;height:150px}.bc-ribbon:before,.bc-ribbon:after{display:none}.bc-close{width:44px;height:44px;top:-8px;right:-8px}.bc-reward{width:100px;min-height:100px}.bc-reward img{width:42px;height:42px}.bc-reward b{font-size:13px}.bc-cta{height:56px;font-size:22px}}.bc-close{place-items:center;display:inline-grid}.bc-close svg{display:block}.bc-info ul li{align-items:center;gap:8px;display:flex}.bc-info ul li svg{color:#f59e0b;flex-shrink:0;display:block}.bc-reward-emoji{color:#b45309;place-items:center;display:inline-grid}.bc-reward-emoji svg{display:block}