.class-detail-page{max-width:1200px;margin:0 auto;padding:4rem 2rem}.back-link-container{margin-bottom:2rem}.back-link{color:var(--color-gray);font-size:.95rem;font-weight:700;transition:color .2s}.back-link:hover{color:var(--color-orange)}.class-hero-card{text-align:left;border:1px solid #f4c20d1a;margin-bottom:4rem;position:relative;overflow:hidden;box-shadow:0 20px 40px -15px #1a252c66;background:linear-gradient(135deg,#111827 0%,#1a252c 100%)!important;padding:3rem 2.5rem!important}.hero-accent-line{background:linear-gradient(to bottom, var(--color-gold), var(--color-orange));width:6px;position:absolute;top:0;bottom:0;left:0}.class-hero-card h1{text-shadow:0 2px 12px #f4c20d40;margin:.5rem 0 .25rem;font-size:2.8rem;font-weight:800;color:var(--color-gold)!important}.course-title-sub{color:#a0aec0;margin:0 0 2.5rem;font-size:1.3rem;font-weight:700}.class-hero-meta{border-top:1px solid #ffffff14;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem;padding-top:2rem;display:grid}.meta-item{align-items:flex-start;gap:1rem;display:flex}.meta-icon{width:2.2rem;height:2.2rem;color:var(--color-orange);background-color:#e67e221a;border-radius:10px;flex-shrink:0;padding:8px}.meta-label{color:#a0aec0;text-transform:uppercase;letter-spacing:.05em;margin-bottom:2px;font-size:.875rem;display:block}.meta-item strong{color:#fff;font-size:1.05rem}.class-students-section{margin-bottom:4rem}.section-subtitle{color:var(--color-gray);text-align:center;margin-bottom:3rem;font-size:1.05rem}.students-showcase-grid{grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:2rem;display:grid}@media (width<=480px){.students-showcase-grid{grid-template-columns:1fr}}.student-showcase-card{border:1px solid #3e4a590d;flex-direction:column;justify-content:space-between;transition:all .3s cubic-bezier(.16,1,.3,1);display:flex;padding:2rem!important}.student-showcase-card.clickable-card{cursor:pointer}.student-showcase-card.clickable-card:hover{border-color:#e67e2240;transform:translateY(-5px);box-shadow:0 20px 40px #3e4a591f}.student-profile-no-avatar{margin-bottom:1.5rem}.student-name-group h3{color:var(--color-blue);margin:0;font-size:1.25rem;font-weight:800}.student-name-group .nickname{color:var(--color-orange)}.student-bio-text{color:var(--color-gray);margin:.5rem 0 0;font-size:.9rem;font-style:italic;line-height:1.5}.student-stickers-box{border-top:1px solid #3e4a590d;padding-top:1.25rem}.stickers-box-label{color:var(--color-gray);letter-spacing:.03em;margin-bottom:.75rem;font-size:.875rem;font-weight:800;display:block}.no-stickers-yet{color:#a0aec0;font-size:.875rem;font-style:italic}.stickers-flex-row{flex-wrap:wrap;gap:10px;display:flex}.showcase-sticker-badge{border:2px solid #fff;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;display:flex;position:relative;box-shadow:0 4px 10px #0000000f}.showcase-sticker-badge .emoji-icon{font-size:1.25rem}.modal-overlay{backdrop-filter:blur(8px);z-index:1000;background-color:#111827cc;justify-content:center;align-items:center;padding:1.5rem;animation:.2s ease-out fadeIn;display:flex;position:fixed;inset:0;overflow-y:auto}.student-vinh-danh-modal{color:#1a252c;border:8px double var(--color-gold);box-sizing:border-box;background:#fff;border-radius:16px;width:100%;max-width:800px;animation:.3s cubic-bezier(.16,1,.3,1) scaleUp;position:relative;box-shadow:0 25px 60px #0006;padding:3.5rem 3rem!important}.btn-close-modal{cursor:pointer;color:var(--color-gray);background:0 0;border:none;transition:color .2s;position:absolute;top:1.5rem;right:1.5rem}.btn-close-modal:hover{color:var(--color-orange)}.vinh-danh-header{margin-bottom:2.5rem}.vinh-danh-badge{letter-spacing:.15em;color:#c69214;text-transform:uppercase;background-color:#f4c20d1a;border:1px solid #f4c20d33;border-radius:4px;margin-bottom:1rem;padding:6px 16px;font-size:.875rem;font-weight:800;display:inline-block}.student-name-large{color:var(--color-blue);margin:0;font-size:3rem;font-weight:900}.nickname-large{color:var(--color-orange)}.student-bio-large{color:var(--color-gray);margin:.5rem 0 1.5rem;font-size:1.15rem;font-style:italic}.vinh-danh-meta{color:#718096;background-color:var(--color-sand);border-radius:8px;gap:1rem;padding:8px 20px;font-size:.95rem;display:inline-flex}.vinh-danh-meta .divider{color:#cbd5e0}.vinh-danh-body{border-top:1px solid #3e4a5914;border-bottom:1px solid #3e4a5914;margin-bottom:2rem;padding:2.5rem 0}.stickers-section-title{letter-spacing:.08em;color:var(--color-gray);text-align:center;margin:0 0 2rem;font-size:.9rem;font-weight:800}.empty-portfolio{color:#a0aec0;font-style:italic}.stickers-showcase-grid-large{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));justify-content:center;gap:2rem;display:grid}.sticker-large-card{flex-direction:column;align-items:center;display:flex}.sticker-3d-wrapper{perspective:1000px;margin-bottom:1rem}.sticker-3d-coin{background-color:#fff;border:8px solid #fff;border-radius:50%;justify-content:center;align-items:center;width:180px;height:180px;display:flex;box-shadow:0 20px 45px #0000001f}.spinning-3d{transform-style:preserve-3d;animation:10s linear infinite spin3D}.spinning-3d:hover{animation-play-state:paused}@keyframes spin3D{0%{transform:rotateY(0)}to{transform:rotateY(360deg)}}.coin-emoji{font-size:6.5rem}.sticker-3d-wrapper.color-Gold .sticker-3d-coin{background-color:#fef3c7;border-width:8px;border-color:#fbbf24;box-shadow:0 20px 45px #fbbf244d}.sticker-3d-wrapper.color-Green .sticker-3d-coin{background-color:#d1fae5;border-width:8px;border-color:#34d399;box-shadow:0 20px 45px #34d3994d}.sticker-3d-wrapper.color-Blue .sticker-3d-coin{background-color:#dbeafe;border-width:8px;border-color:#60a5fa;box-shadow:0 20px 45px #60a5fa4d}.sticker-3d-wrapper.color-Orange .sticker-3d-coin{background-color:#ffedd5;border-width:8px;border-color:#f97316;box-shadow:0 20px 45px #f973164d}.sticker-3d-wrapper.color-Red .sticker-3d-coin{background-color:#fee2e2;border-width:8px;border-color:#f87171;box-shadow:0 20px 45px #f871714d}.sticker-3d-wrapper.color-Purple .sticker-3d-coin{background-color:#f3e8ff;border-width:8px;border-color:#c084fc;box-shadow:0 20px 45px #c084fc4d}.sticker-3d-wrapper.color-Pink .sticker-3d-coin{background-color:#fce7f3;border-width:8px;border-color:#f472b6;box-shadow:0 20px 45px #f472b64d}.sticker-label-group{margin-top:.5rem}.sticker-english-name{color:var(--color-blue);text-transform:uppercase;margin-bottom:.4rem;font-size:1rem;font-weight:800;display:block}.sticker-award-reason{color:#4a5568;max-width:180px;margin:0;font-size:.875rem;line-height:1.45}.sticker-award-date{color:#a0aec0;margin-top:6px;font-size:.875rem;display:block}.vinh-danh-footer{flex-direction:column;align-items:center;gap:.5rem;display:flex}.footer-logo{height:36px}.sutucon-link{color:var(--color-orange);margin:0;font-size:.875rem;font-weight:800}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes scaleUp{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.vinh-danh-fullscreen-view{max-width:960px;margin:0 auto;padding:2rem 1rem}.student-vinh-danh-full-page{color:#1a252c;border:8px double var(--color-gold);box-sizing:border-box;text-align:center;background:#fff;border-radius:16px;width:100%;box-shadow:0 20px 50px #00000014;padding:5rem 4rem!important}.vinh-danh-fullscreen-view .btn-back-plain{color:var(--color-blue);cursor:pointer;background-color:#0000;border:1px solid #3e4a5926;border-radius:8px;padding:8px 16px;font-weight:700;transition:all .2s}.vinh-danh-fullscreen-view .btn-back-plain:hover{border-color:var(--color-orange);color:var(--color-orange);background-color:#3e4a590d}.student-vinh-danh-full-page .vinh-danh-meta{color:#718096;background-color:var(--color-sand);border-radius:8px;flex-wrap:wrap;justify-content:center;gap:.75rem 1rem;margin:0 auto;padding:8px 24px;font-size:.95rem;display:inline-flex}.student-vinh-danh-full-page .stickers-showcase-grid-large{flex-wrap:wrap;justify-content:center;gap:3rem;display:flex}.student-vinh-danh-full-page .sticker-large-card{flex-direction:column;align-items:center;min-width:160px;display:flex}@media (width<=600px){.student-vinh-danh-full-page{padding:3rem 1.5rem!important}.student-name-large{font-size:2.2rem}}
