:root{
  --bnx-gap: 20px;
  --bnx-radius: 16px;
  --bnx-border: #e9edf2;
  --bnx-border-soft: #eef2f6;
  --bnx-text: #111;
  --bnx-muted: #9aa3af;
  --bnx-bg: #fff;
  --bnx-chip-bg: #f4f6fa;
  --bnx-shadow: 0 1px 3px rgba(0,0,0,.04);
}

.bnx.container{
  width:100%;
  margin:0 auto;
  padding:8px 0 20px;
  color:var(--bnx-text);
}

.bnx-tabs{
  display:flex; gap:12px; align-items:center; justify-content:center;
  padding:4px;
  background:var(--bnx-chip-bg);
  border:1px solid #e8edf3;
  border-radius:10px;
  box-shadow:0 1px 3px rgba(0,0,0,.03) inset;
  width:fit-content;
  margin:12px auto 18px;
}
.bnx-tab{
  display:inline-block;
  padding:10px 18px;
  border-radius:8px;
  border:1px solid transparent;
  background:transparent;
  color:#6b7280;
  font-weight:800;
  font-size:14px;
  line-height:1;
  text-decoration:none;
  transition:background .15s, color .15s, border-color .15s, transform .05s;
}
.bnx-tab:hover{ color:#374151; background:#eef2f7; }
.bnx-tab.is-active{
  background:#fff; color:var(--bnx-text);
  border-color:#e6ebf1; box-shadow:0 1px 2px rgba(0,0,0,.06);
  transform:translateY(-1px);
}

.bnx-list{
  list-style:none; margin:0; padding:0;
  background:var(--bnx-bg);
  border:1px solid var(--bnx-border);
  border-radius:var(--bnx-radius);
  box-shadow:var(--bnx-shadow);
}


.bnx-item{
  display:grid;
  grid-template-columns: 1fr 180px;  
  gap:var(--bnx-gap);
  padding:20px 50px;              
  border-bottom:1px solid var(--bnx-border-soft);
  transition:background-color .15s ease;
}
.bnx-item:last-child{ border-bottom:none; }
.bnx-item:hover{ background:#f7f9fc; }

.bnx-meta{
  display:flex; align-items:center; gap:12px;
  margin-bottom:8px;
}
.bnx-time{
  display:inline-block;
  padding:4px 10px;
  border-radius:6px;
  background:#eff3f8;
  color:#374151;
  font-size:12px;                     
  font-weight:800;
  letter-spacing:.2px;
  white-space:nowrap;
}
.bnx-date{
  font-size:13px;                     
  color:var(--bnx-muted);
  white-space:nowrap;
}

.bnx-body{ min-width:0; }
.bnx-title{
  margin:0 0 6px;
  font-size:18px;                     
  line-height:1.35;
  font-weight:800;
}
.bnx-title__link{ color:var(--bnx-text); text-decoration:none; }
.bnx-item:hover .bnx-title__link{ text-decoration:underline; }

.bnx-summary{
  color:#4b5563;
  font-size:16px;                     
  line-height:1.6;
}


.bnx-thumb{
  width:180px; height:120px;
  border-radius:14px; overflow:hidden; background:#f3f5f7; display:block;
  box-shadow:var(--bnx-shadow);
}
.bnx-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }


@supports (-webkit-line-clamp: 2) {
  .bnx-title{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .bnx-summary{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
}

.bnx-source{ display:none !important; }

.bnx-more{ padding:18px 0 8px; }
.bnx-btn{
  appearance:none; cursor:pointer; display:block; width:100%;
  padding:14px 16px;
  border-radius:16px;
  font-weight:900; font-size:14px; text-align:center;
  border:1px solid #e6ebf1; background:#fff; color:#374151;
  box-shadow:var(--bnx-shadow);
  transition:background .15s, transform .05s, opacity .15s;
}
.bnx-btn:hover{ background:#f1f4f9; transform:translateY(-1px); }
.bnx-btn.is-loading{ opacity:.7; cursor:progress; }
.bnx-btn.is-disabled{ opacity:.5; cursor:not-allowed; }


@media (max-width: 900px){
  .bnx-item{ grid-template-columns: 1fr 160px; }
  .bnx-thumb{ width:160px; height:106px; }
}

@media (max-width: 720px){
  .bnx-item{
    grid-template-columns: 1fr 140px;
    gap:16px;
    padding:20px 24px;        
  }
  .bnx-thumb{ width:140px; height:96px; }
  .bnx-date{ display:none; }  
  .bnx-summary{ font-size:16px; }
}