/* Nhóm học tập THPTQG - component styles riêng */
.iduGroupGrid,.iduGroupGrid *{box-sizing:border-box}
.iduGroupGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;width:100%;max-width:1000px;margin:0 auto;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial}
.iduGroupCard{--iduColor:#2563eb;--iduLight:#eff6ff;display:flex;flex-direction:column;min-width:0;overflow:hidden;position:relative;background:#fff;border:1px solid #e5eaf1;border-radius:18px;text-decoration:none!important;color:#111827!important;box-shadow:0 3px 15px rgba(20,40,80,.04);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.iduGroupCard:nth-child(2n){--iduColor:#7c3aed;--iduLight:#f5f3ff}
.iduGroupCard:hover{transform:translateY(-3px);box-shadow:0 10px 25px rgba(20,40,80,.1);border-color:var(--iduColor)}
.iduGroupVisual{height:125px;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;background:linear-gradient(125deg,var(--iduLight),#f8fafc)}
.iduGroupVisual:before,.iduGroupVisual:after{content:"";position:absolute;width:160px;height:160px;border:1px solid rgba(100,116,139,.12);border-radius:50%;pointer-events:none}
.iduGroupVisual:before{left:-70px;top:-100px}.iduGroupVisual:after{right:-60px;bottom:-110px}
.iduGroupAvatar{width:75px;height:75px;border-radius:21px;object-fit:cover;background:#fff;border:3px solid #fff;position:relative;z-index:1;box-shadow:0 6px 20px rgba(0,0,0,.1);transition:transform .2s ease}
.iduGroupCard:hover .iduGroupAvatar{transform:scale(1.06)}
.iduGroupBody{display:flex;flex:1;flex-direction:column;gap:9px;padding:15px 16px;min-width:0}
.iduGroupName{font-size:16px;font-weight:800;line-height:1.4;overflow-wrap:break-word;color:#111827}
.iduGroupMembers{display:flex;align-items:center;gap:6px;font-size:12px;color:#64748b}.iduGroupMembers svg{width:15px;height:15px;flex-shrink:0}
.iduGroupFooter{margin-top:auto;padding:0 16px 16px}
.iduGroupButton{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;min-height:42px;padding:9px 14px;border-radius:11px;background:var(--iduLight);color:var(--iduColor);font-size:13px;font-weight:800;transition:background .2s ease,color .2s ease}
.iduGroupButton svg{width:15px;height:15px;flex-shrink:0}
.iduGroupCard:hover .iduGroupButton{background:var(--iduColor);color:#fff}
.iduGroupCard:focus-visible{outline:3px solid #60a5fa;outline-offset:3px}
.menu-hero h1{max-width:740px}
@media(max-width:650px){
.iduGroupGrid{grid-template-columns:1fr;gap:10px;margin:0 auto}
.iduGroupCard{display:grid;grid-template-columns:64px minmax(0,1fr);grid-template-areas:"img body" "footer footer";align-items:center;gap:10px;padding:12px;border-radius:15px;box-shadow:0 2px 10px rgba(20,40,80,.04)}
.iduGroupVisual{grid-area:img;width:64px;height:64px;min-height:0;border-radius:13px}
.iduGroupVisual:before,.iduGroupVisual:after{display:none}
.iduGroupAvatar{width:50px;height:50px;border-radius:12px;border-width:2px}
.iduGroupBody{grid-area:body;justify-content:center;padding:0;gap:6px;min-height:64px}
.iduGroupName{font-size:14px;line-height:1.35;font-weight:750}
.iduGroupMembers{font-size:12px;gap:5px}.iduGroupMembers svg{width:14px;height:14px}
.iduGroupFooter{grid-area:footer;margin:0;padding:0}
.iduGroupButton{width:100%;min-height:44px;padding:10px 12px;font-size:12px;border-radius:9px}
}
@media(max-width:360px){.iduGroupCard{grid-template-columns:54px minmax(0,1fr);padding:10px;gap:9px}.iduGroupVisual{width:54px;height:54px}.iduGroupAvatar{width:44px;height:44px}.iduGroupBody{min-height:54px}.iduGroupName{font-size:13px}}
@media(prefers-reduced-motion:reduce){.iduGroupCard,.iduGroupAvatar,.iduGroupButton{transition:none}}

/* Keep each card recognizable if the third-party avatar fails to load */
.iduGroupVisual{isolation:isolate}.iduGroupFallback{position:relative;z-index:0;display:grid;place-items:center;width:75px;height:75px;border-radius:21px;background:var(--iduColor);color:#fff;font-size:23px;font-weight:950;letter-spacing:-.04em}.iduGroupAvatar{position:absolute;z-index:1;inset:50% auto auto 50%;transform:translate(-50%,-50%)}.iduGroupCard:hover .iduGroupAvatar{transform:translate(-50%,-50%) scale(1.06)}
@media(max-width:650px){.iduGroupFallback{width:50px;height:50px;border-radius:12px;font-size:17px}}@media(max-width:360px){.iduGroupFallback{width:44px;height:44px}}