.nb-main { margin-top: 18px; padding: 16px 0 56px; color: #16334f; }
.nb-section { margin-top: 34px; }

.nb-hero { border-radius: 12px; padding: 20px; display: grid; grid-template-columns: 1.15fr .85fr; gap: 18px; align-items: center; }
.nb-tag { display: inline-block; padding: 6px 12px; border-radius: 999px; background: rgba(3, 121, 237, .1); color: #0379ed; font-size: 13px; font-weight: bold; }
.nb-hero h1 { margin-top: 12px; font-size: 36px; line-height: 1.25; color: #112f4b; }
.nb-hero p { margin-top: 12px; color: #5a7186; line-height: 1.8; }
.nb-hero-img { border-radius: 10px; overflow: hidden; border: 1px solid #dbe7f5; }
.nb-hero-img img { width: 100%; height: 190px; object-fit: cover; display: block; }

.nb-filter { display: flex; flex-wrap: wrap; gap: 10px; }
.nb-chip { border: 1px solid #d7e5f6; background: #fff; color: #476686; border-radius: 999px; padding: 8px 14px; cursor: pointer; font-size: 14px; }
.nb-chip.active,
.nb-chip:hover { background: #0379ed; color: #fff; border-color: #0379ed; }

.nb-list { margin-top: 18px; display: grid; gap: 12px; }
.nb-item { background: #fff; border: 1px solid #e4edf8; border-radius: 12px; padding: 14px; }
.nb-item-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.nb-item-head time { color: #708398; font-size: 13px; }
.nb-item h3 { margin-top: 10px; color: #12314f; font-size: 20px; }
.nb-item p { margin-top: 8px; color: #5f7388; line-height: 1.8; }

.nb-label { display: inline-flex; align-items: center; justify-content: center; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: bold; }
.nb-label.system { color: #0f6dc8; background: rgba(15, 109, 200, .12); }
.nb-label.product { color: #1d8d50; background: rgba(29, 141, 80, .12); }
.nb-label.activity { color: #c07a00; background: rgba(192, 122, 0, .14); }
.nb-label.security { color: #b73c3c; background: rgba(183, 60, 60, .12); }

.nb-empty { margin-top: 12px; display: none; text-align: center; color: #6c8094; padding: 18px 10px; border-radius: 10px; background: #f7fbff; border: 1px dashed #c7dbf1; }

@media only screen and (max-width: 1280px) {
    .nb-main { padding: 20px 16px 46px; }
}

@media only screen and (max-width: 992px) {
    .nb-hero { grid-template-columns: 1fr; }
    .nb-hero h1 { font-size: 30px; }
}

@media only screen and (max-width: 768px) {
    .nb-hero h1 { font-size: 26px; }
}