/* Minimal styles */
.tcc-news-hub { --gap: 16px; }
.tcc-toolbar { display:flex; align-items:flex-end; justify-content:space-between; gap:var(--gap); margin-bottom: var(--gap); flex-wrap: wrap; }
.tcc-chips { display:flex; gap: 6px; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; padding-bottom: 12px !important; }
.tcc-chip { border:1px solid #e2e8f0; padding:6px 10px; border-radius:999px; background:#fff; cursor:pointer; white-space: nowrap; scroll-snap-align: start; text-decoration:none; color:#0f172a; }
.tcc-chip.is-active { background: #63c06d; color: #fff; border-color: #63c06d; }
button, html [type=button] { -webkit-appearance: button; letter-spacing: unset; }

.tcc-results { display:grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); }
.tcc-card { grid-column: span 12; border:1px solid #f1f5f9; border-radius:12px; overflow:hidden; background:#fff; display:flex; flex-direction:column; text-align:left; position:relative; }
.tcc-thumb img { display:block; width:100%; height:auto; }
.tcc-content { padding:12px 14px; text-align:left; }
.tcc-title { font-weight:600; font-size: 1.15em; display:block; margin:0 0 6px 0; color:black; text-align:left; line-height:1.3; }
.tcc-meta { font-size:.85rem; color:#64748b; margin-bottom:6px; text-align:left; }
.tcc-excerpt { margin:0; color:#334155; text-align:left; }

@media(min-width:640px){ .tcc-card{ grid-column: span 6; } }
@media(min-width:1024px){ .tcc-card{ grid-column: span 4; } }

.tcc-pagination { display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:nowrap; margin-top:16px; }
.tcc-page, .tcc-page-info { display:inline-flex; align-items:center; }
.tcc-page {
  display:inline-flex; align-items:center; justify-content:center;
  padding:8px 16px;
  border:2px solid #54c070;
  background:#fff;
  color:#54c070;
  font-size:14px; line-height:1;
  border-radius:999px; /* pill */
  cursor:pointer;
  transition:all .25s ease;
}
/* hover + active state */
.tcc-page:hover,
.tcc-page.is-active { background:#54c070; color:#fff; }

/* Optional: true circle icon button (use when content is just an arrow) */
.tcc-page.tcc-page--circle { width:40px; height:40px; padding:0; border-radius:50%; }

.tcc-page.is-disabled{
  opacity:.4; pointer-events:none;
  background:#f1f5f9; border-color:#e2e8f0; color:#94a3b8;
}

.tcc-badges { position:absolute; margin:8px; display:flex; gap:6px; flex-wrap:wrap; }
.tcc-badge { background:#0f172a; color:#fff; font-size:.75rem; padding:4px 8px; border-radius:999px; }

/* skeleton */
.tcc-skeletons{ display:grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); }
.tcc-skel-card{ grid-column: span 12; border:1px solid #f1f5f9; border-radius:12px; overflow:hidden; background:#fff; }
@media(min-width:640px){ .tcc-skel-card{ grid-column: span 6; } }
@media(min-width:1024px){ .tcc-skel-card{ grid-column: span 4; } }
.skel-img{ background:#e2e8f0; height:160px; }
.skel-line{ height:12px; background:#e2e8f0; margin:10px; border-radius:6px; }
.skel-line.short{ width:60%; }

/* View-all button for active topic */
.tcc-active-link { margin-left: auto; display:flex; align-items:center; }
.tcc-active-link .tcc-view-all {
  display:inline-block;
  padding:10px 14px;
  border-radius:999px;
  background:#0ea5e9;
  color:#fff;
  text-decoration:none;
  font-weight:600;
  line-height:1;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
.tcc-active-link .tcc-view-all:hover { background:#0284c7; }
.tcc-active-link .tcc-view-all:focus { outline: 2px solid #bae6fd; outline-offset: 2px; }
@media (max-width: 640px){
  .tcc-active-link { width:100%; justify-content:center; margin-top:8px; }
}

.tcc-title a { text-decoration:none; color:inherit; }
.tcc-title a:hover { text-decoration:underline; }

/* Place 'Xem tất cả' below pagination */
.tcc-pagination + .tcc-active-link { display:flex; justify-content:center; margin-top:10px; }


/* Meta: add dashicon clock + 'Đăng ngày:' prefix */
.tcc-meta::before {
  content: "\f469  Đăng ngày: ";
  font-family: "Dashicons";
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  margin-right: 4px;
  color: #64748b;
}


/* Ensure meta inline with icon + text baseline */
.tcc-meta{
  display:inline !important;
  align-items:center;
  gap:4px;
}


/* Sub-hub header box */
#wrapper > header.tcc-term-header{
  background:#fff;
  padding:12px;
  margin:0 auto 16px;
  box-sizing:border-box;
  border:1px solid #e2e8f0;
  border-radius:8px;
  max-width:1200px;
}