.challenge-page{background:var(--bg-app);min-height:100vh}.challenge-hero{background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);color:var(--white);border-bottom-right-radius:24px;border-bottom-left-radius:24px;padding:30px 20px 45px;position:relative;overflow:hidden}.challenge-hero:after{content:"";background:radial-gradient(circle,#ffffff1a 0%,#0000 70%);border-radius:50%;width:150px;height:150px;position:absolute;top:-30px;right:-30px}.challenge-hero h2{font-family:var(--font_b);color:var(--white);margin-bottom:8px;font-size:24px}.challenge-hero p{opacity:.9;font-size:14px;line-height:1.5}.challenge-progress-card{background:var(--white);z-index:10;border-radius:16px;align-items:center;gap:16px;margin:-25px 20px 20px;padding:16px;display:flex;position:relative;box-shadow:0 8px 24px #0000000f}.cp-ring{width:60px;height:60px;position:relative}.cp-ring svg{width:60px;height:60px;transform:rotate(-90deg)}.cp-ring-bg{fill:none;stroke:var(--border);stroke-width:5px}.cp-ring-fill{fill:none;stroke:#44c97a;stroke-width:5px;stroke-linecap:round;transition:stroke-dashoffset .6s var(--ease)}.cp-ring-text{font-family:var(--font_b);color:var(--title);justify-content:center;align-items:center;font-size:14px;display:flex;position:absolute;top:0;bottom:0;left:0;right:0}.cp-info{flex:1}.cp-info h4{font-family:var(--font_b);color:var(--title);margin-bottom:4px;font-size:15px}.cp-info p{color:var(--text-sub);font-size:12px}.challenge-list{flex-direction:column;gap:12px;padding:0 20px 30px;display:flex}.challenge-item{background:var(--white);box-shadow:var(--shadow-card);cursor:pointer;border:1.5px solid #0000;border-radius:16px;align-items:center;gap:14px;padding:14px 16px;transition:transform .2s,box-shadow .2s,background .3s,border-color .3s;display:flex}.challenge-item:active{transform:scale(.97)}.challenge-item.completed{box-shadow:none;background:#f4fbf7;border-color:#44c97a66}.ch-checkbox{border:2px solid var(--border);color:#0000;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:24px;height:24px;font-size:14px;transition:all .3s;display:flex}.challenge-item.completed .ch-checkbox{color:var(--white);background:#44c97a;border-color:#44c97a}.ch-icon-wrap{border-radius:12px;flex-shrink:0;justify-content:center;align-items:center;width:42px;height:42px;font-size:18px;transition:opacity .3s;display:flex}.challenge-item.completed .ch-icon-wrap{opacity:.4}.ch-icon-wrap.blue{color:#2b78d4;background:linear-gradient(135deg,#e8f1ff 0%,#d0e3ff 100%)}.ch-icon-wrap.orange{color:#e07c1c;background:linear-gradient(135deg,#fff3e0 0%,#ffe0b2 100%)}.ch-icon-wrap.teal{color:#00897b;background:linear-gradient(135deg,#e0f9f7 0%,#b3efeb 100%)}.ch-icon-wrap.purple{color:#6b4cf6;background:linear-gradient(135deg,#ede8ff 0%,#d9d0ff 100%)}.ch-icon-wrap.green{color:#2da060;background:linear-gradient(135deg,#e3faf0 0%,#c8f2de 100%)}.ch-content{flex:1;transition:opacity .3s}.challenge-item.completed .ch-content{opacity:.5}.ch-content h4{font-family:var(--font_b);color:var(--title);margin-bottom:2px;font-size:14px;transition:color .3s}.challenge-item.completed .ch-content h4{color:var(--text-sub);text-decoration:line-through}.ch-content p{color:var(--text-sub);font-size:12px;line-height:1.4}@media (min-width:992px){.challenge-page{background:radial-gradient(circle at 8% 20%,#2b78d412,#0000 28%),radial-gradient(circle at 94% 72%,#44c97a14,#0000 24%),#f4f7fa;min-height:100vh;overflow:visible}.challenge-page>.header-home{box-sizing:border-box;border:1px solid #e2e9ef;border-radius:14px;width:min(1240px,100% - 64px);min-height:64px;margin:22px auto 0;padding:12px 18px;position:relative;top:auto;box-shadow:0 8px 28px #1e3a6c0f}.challenge-page>.header-home .logo{color:#304c63;border-radius:9px;min-width:116px;padding:8px 11px;transition:background .18s,transform .18s}.challenge-page>.header-home .logo:hover{background:#f1f5f8;transform:translate(-2px)}.challenge-page>.header-home .logo span{font-size:13px}.challenge-workspace{grid-template-columns:minmax(0,1fr) 330px;grid-template-areas:"hero hero""tasks progress";align-items:start;gap:28px;width:min(1240px,100% - 64px);margin:18px auto 80px;display:grid}.challenge-hero{box-sizing:border-box;background:radial-gradient(circle at 86% 30%,#ffffff29,#0000 18%),linear-gradient(125deg,#286fbf 0%,#194a85 58%,#173a66 100%);border-radius:22px;grid-area:hero;min-height:205px;padding:42px 48px;box-shadow:0 20px 48px #1a4a8533}.challenge-hero:before{content:"";border:44px solid #ffffff0d;border-radius:50%;width:270px;height:270px;position:absolute;bottom:-96px;right:58px}.challenge-hero:after{background:radial-gradient(circle,#74e1c124,#0000 68%);width:240px;height:240px;top:-90px;right:23%}.challenge-desktop-eyebrow{z-index:1;color:#ffffffc7;font-family:var(--font_b);letter-spacing:1.15px;background:#ffffff17;border:1px solid #fff3;border-radius:999px;align-items:center;gap:7px;margin-bottom:17px;padding:6px 10px;font-size:9px;position:relative}.challenge-hero h2,.challenge-hero p{z-index:1;max-width:660px;position:relative}.challenge-hero h2{letter-spacing:-.7px;margin-bottom:10px;font-size:36px}.challenge-hero p{font-size:14px;line-height:1.65}.challenge-progress-card{z-index:1;text-align:center;border:1px solid #dfe8ef;border-radius:20px;flex-direction:column;grid-area:progress;align-items:center;gap:20px;margin:0;padding:30px 26px;position:sticky;top:24px;box-shadow:0 14px 38px #1e3a6c17}.challenge-progress-card:before{color:var(--primary);font-family:var(--font_b);letter-spacing:1.2px;content:"TIẾN ĐỘ HÔM NAY";font-size:9px;display:block}.cp-ring,.cp-ring svg{width:118px;height:118px}.cp-ring-bg,.cp-ring-fill{stroke-width:4px}.cp-ring-text{font-family:var(--font_num);font-size:18px}.cp-info h4{margin-bottom:7px;font-size:18px}.cp-info p{max-width:235px;font-size:12px;line-height:1.55}.challenge-tasks{grid-area:tasks;min-width:0}.challenge-list-heading{border-bottom:1px solid #dde6ed;justify-content:space-between;align-items:flex-end;gap:24px;padding:4px 2px 17px}.challenge-list-heading span{color:var(--primary);font-family:var(--font_b);letter-spacing:1.15px;margin-bottom:5px;font-size:9px;display:block}.challenge-list-heading h3{color:#203a50;font-family:var(--font_b);letter-spacing:-.35px;margin:0;font-size:24px}.challenge-list-heading p{color:#7b8e9e;margin:0 0 2px;font-size:11.5px}.challenge-list-heading strong{color:#38556c}.challenge-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding:20px 0 0;display:grid}.challenge-item{box-sizing:border-box;border:1px solid #e2e9ef;border-radius:16px;min-height:116px;padding:19px;box-shadow:0 7px 22px #1e3a6c0e}.challenge-item:hover{border-color:#bfd0df;transform:translateY(-3px);box-shadow:0 13px 30px #1e3a6c1a}.challenge-item:active{transform:translateY(-1px)scale(.99)}.challenge-item.completed{border-color:#44c97a57;box-shadow:0 7px 20px #2c8e590a}.ch-icon-wrap{border-radius:14px;width:52px;height:52px;font-size:21px}.ch-content h4{margin-bottom:5px;font-size:15px}.ch-content p{font-size:11.5px;line-height:1.5}.ch-checkbox{width:27px;height:27px;font-size:15px}}@media (min-width:992px) and (max-width:1160px){.challenge-workspace{grid-template-columns:minmax(0,1fr) 290px;gap:22px}.challenge-list{grid-template-columns:minmax(0,1fr)}}
