Đề bài: [Thiết kế Web] Layout tổng hợp: header cố định, sidebar sticky, badge nổi

Cho HTML sau (.app-header position fixed cần viết, .app-sidebar position sticky cần viết, .app-main cần margin-top/margin-left đúng để không bị che, .notify-badge position absolute đè góc trên-phải .app-sidebar — lưu ý position: sticky cũng đóng vai trò điểm neo cho phần tử con absolute nên không cần thêm relative).

Viết đầy đủ CSS:

• .app-header fixed top:0 left:0 width:100% height:56px nền #111827 chữ trắng z-index:50
• .app-sidebar position: sticky, top: 56px, width: 160px, height: calc(100vh - 56px), nền #f1f5f9, padding: 16px, float: left
• .app-main margin-left: 160px, margin-top: 56px, padding: 20px
• .notify-badge position: absolute, top: -8px, right: -8px, nền đỏ, chữ trắng, width: 20px, height: 20px, border-radius: 50%, text-align: center, line-height: 20px, z-index: 60