:root {
    --black:#000; --white:#fff; --yellow:#FFE500; --pink:#FF3CAC;
    --green:#00C853; --blue:#2979FF; --orange:#FF6D00; --red:#FF1744;
    --bg:#FFF9C4; --shadow:4px 4px 0px #000; --shadow-lg:6px 6px 0px #000;
}
*{box-sizing:border-box;margin:0;padding:0;font-family:'Nunito',sans-serif;}
body{
    background-color:var(--bg);
    background-image:radial-gradient(circle,#000 1.5px,transparent 1.5px);
    background-size:28px 28px;
    min-height:100vh;
    padding:28px 16px 48px;
}

/* HEADER */
.header{
    max-width:960px;margin:0 auto 36px;
    background:var(--yellow);border:4px solid var(--black);
    box-shadow:8px 8px 0 var(--black);
    padding:24px 28px 20px;
    display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;
}
.header-icon{font-size:52px;line-height:1;}
.header h1{font-size:28px;font-weight:900;text-transform:uppercase;color:var(--black);letter-spacing:1px;line-height:1.3;}
.header h1 span{color:var(--pink);}
.header-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;}
.meta-chip{background:var(--black);color:var(--white);font-size:13px;font-weight:800;text-transform:uppercase;padding:5px 14px;border:2px solid var(--black);box-shadow:3px 3px 0 var(--pink);}

/* STATS */
.stats-bar{max-width:960px;margin:0 auto 36px;display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px;}
.stat-card{background:var(--white);border:4px solid var(--black);box-shadow:var(--shadow);padding:16px 18px;text-align:center;}
.stat-card .stat-num{font-size:36px;font-weight:900;line-height:1;}
.stat-card .stat-lbl{font-size:12px;font-weight:800;text-transform:uppercase;color:#555;margin-top:4px;}

/* SECTION TITLE */
.section-title{max-width:960px;margin:0 auto 20px;display:flex;align-items:center;gap:12px;}
.section-title h2{font-size:20px;font-weight:900;text-transform:uppercase;background:var(--pink);color:var(--white);border:3px solid var(--black);box-shadow:var(--shadow);padding:6px 18px;white-space:nowrap;}
.section-title .line{flex:1;height:4px;background:var(--black);}

/* GRID */
.grid{max-width:960px;margin:0 auto 40px;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px;}

/* CLASS SELECTOR */
.class-grid{max-width:960px;margin:0 auto 40px;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:18px;}
.class-card{display:flex;flex-direction:column;gap:10px;text-decoration:none;color:var(--black);background:var(--white);border:4px solid var(--black);box-shadow:var(--shadow-lg);padding:20px;min-height:170px;transition:transform .15s,box-shadow .15s;}
.class-card:hover{transform:translate(-3px,-3px);box-shadow:10px 10px 0 var(--black);}
.class-card:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--black);}
.class-grade{display:inline-block;width:max-content;background:var(--black);color:var(--white);font-size:12px;font-weight:900;text-transform:uppercase;padding:4px 10px;border:2px solid var(--black);box-shadow:3px 3px 0 rgba(0,0,0,.12);}
.class-name{font-size:18px;font-weight:900;line-height:1.2;}
.class-desc{font-size:13px;font-weight:700;color:#555;line-height:1.5;}
.class-c1{background:linear-gradient(180deg,#FFF8E1 0%,#FFFFFF 100%);}
.class-c2{background:linear-gradient(180deg,#E3F2FD 0%,#FFFFFF 100%);}
.class-c3{background:linear-gradient(180deg,#E8F5E9 0%,#FFFFFF 100%);}
.class-c4{background:linear-gradient(180deg,#FCE4EC 0%,#FFFFFF 100%);}
.class-c5{background:linear-gradient(180deg,#FFF3E0 0%,#FFFFFF 100%);}

/* CARD */
.card{background:var(--white);border:4px solid var(--black);box-shadow:var(--shadow-lg);display:flex;flex-direction:column;text-decoration:none;color:var(--black);transition:transform .15s,box-shadow .15s;position:relative;overflow:hidden;}
.card.clickable{cursor:pointer;}
.card.clickable:hover{transform:translate(-3px,-3px);box-shadow:10px 10px 0 var(--black);}
.card.clickable:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--black);}
.card.soon{opacity:.65;cursor:not-allowed;}
.card-header{padding:18px 18px 14px;border-bottom:3px solid var(--black);display:flex;align-items:center;gap:12px;}
.card-num{font-size:28px;font-weight:900;line-height:1;min-width:40px;text-align:center;}
.card-label{font-size:11px;font-weight:900;text-transform:uppercase;color:var(--white);padding:2px 8px;display:inline-block;margin-bottom:4px;}
.card-title{font-size:15px;font-weight:900;line-height:1.3;}
.card-body{padding:14px 18px;flex:1;display:flex;flex-direction:column;gap:8px;}
.card-chips{display:flex;flex-wrap:wrap;gap:6px;}
.chip{font-size:11px;font-weight:800;text-transform:uppercase;border:2px solid var(--black);padding:3px 10px;box-shadow:2px 2px 0 #000;}
.card-footer{padding:12px 18px;border-top:3px solid var(--black);display:flex;align-items:center;justify-content:space-between;}
.go-btn{background:var(--black);color:var(--white);font-size:12px;font-weight:900;text-transform:uppercase;padding:6px 16px;border:2px solid var(--black);box-shadow:3px 3px 0 var(--yellow);}
.card.clickable:hover .go-btn{background:var(--yellow);color:var(--black);box-shadow:3px 3px 0 var(--black);}
.card-score{font-size:13px;font-weight:800;color:#555;}

/* SOON BADGE */
.soon-badge{position:absolute;top:12px;right:-28px;background:var(--orange);color:var(--white);font-size:11px;font-weight:900;text-transform:uppercase;padding:4px 36px;transform:rotate(45deg);border-top:2px solid var(--black);border-bottom:2px solid var(--black);}

/* LOADING */
.loading{max-width:960px;margin:40px auto;text-align:center;font-size:18px;font-weight:900;color:#555;}

/* FOOTER */
.footer{max-width:960px;margin:0 auto;text-align:center;font-size:13px;font-weight:700;color:#666;}
.footer b{color:var(--pink);}

/* CHIP COLORS xoay vòng */
.chip-c0{background:var(--yellow);}
.chip-c1{background:#E3F2FD;}
.chip-c2{background:#F3E5F5;}
.chip-c3{background:#E8F5E9;}
.chip-c4{background:#FCE4EC;}
.chip-c5{background:#FFF3E0;}