.course-group-handoff{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px 18px;margin:18px 0;padding:20px;border:2px solid #69ca83;border-radius:18px;background:linear-gradient(135deg,#effdf3 0,#fff 68%,#eef5ff 100%);color:#18304a;box-shadow:0 10px 28px rgb(22 58 112 / 9%)}
.course-group-handoff>div{display:grid;gap:4px;min-width:0}.course-group-handoff strong{color:#125f34;font:800 20px/1.25 Kanit,Sarabun,sans-serif}.course-group-handoff span,.course-group-handoff small{font-size:14px;line-height:1.55}.course-group-handoff small{grid-column:1/3;color:#526277}.course-group-kicker{color:#167b39;font-size:11px!important;font-weight:900;letter-spacing:.07em}.course-group-button{justify-self:end;min-width:250px;text-align:center;background:#19a83a!important;box-shadow:0 8px 20px rgb(22 128 58 / 20%)}.course-group-status.clicked strong{color:#8a5200}.course-group-handoff:has(.clicked){border-color:#f0b84a;background:linear-gradient(135deg,#fff8e6,#fff 72%)}.course-group-handoff.is-done{grid-template-columns:1fr;border-width:1px;border-color:#a9d9bb;box-shadow:none}.portal-start-success{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:15px 0 8px;padding:12px 15px;border-radius:12px;background:#163a70;color:#fff}.portal-start-success strong,.portal-start-success span{color:#fff}.portal-learn-later{margin-top:2px}
@media(max-width:700px){.course-group-handoff{grid-template-columns:1fr;padding:17px}.course-group-handoff small{grid-column:1}.course-group-button{justify-self:stretch;width:100%;min-width:0}.course-group-handoff strong{font-size:18px}.portal-start-success{align-items:flex-start;flex-direction:column}}