/* Học Toán 123 v2.2.6
 * Unified category hubs + separate THCS / THPT footer columns.
 */

/* ---------- Unified category archive ---------- */
html body.category .ht123-unified-category-page{
  width:100%!important;
  max-width:none!important;
  padding:0!important;
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif!important;
}
html body.category .ht123-unified-category-hero{
  box-sizing:border-box!important;
  margin:0 0 20px!important;
  padding:27px 30px!important;
  border:1px solid #dfe7f1!important;
  border-top:4px solid #377cf6!important;
  border-radius:17px!important;
  background:linear-gradient(135deg,#fff 0%,#fff 78%,#f0f5ff 78%,#f0f5ff 100%)!important;
  box-shadow:0 8px 24px rgba(22,49,85,.05)!important;
}
html body.category .ht123-unified-category-hero h1{
  margin:5px 0 9px!important;
  color:#19324f!important;
  font-family:inherit!important;
  font-size:32px!important;
  line-height:1.16!important;
  font-weight:800!important;
  letter-spacing:-.02em!important;
}
html body.category .ht123-unified-title-row{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  margin:4px 0 8px!important;
}
html body.category .ht123-unified-title-row h1{margin:0!important;}
html body.category .ht123-unified-title-row .ht123-archive-title-icon{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:42px!important;
  height:42px!important;
  flex:0 0 42px!important;
  border:1px solid #dce8f6!important;
  border-radius:12px!important;
  background:#eef5ff!important;
  font-size:21px!important;
}
html body.category .ht123-unified-category-hero .ht123-archive-description,
html body.category .ht123-unified-category-hero .ht123-archive-description p{
  max-width:940px!important;
  margin:0!important;
  color:#5c6f87!important;
  font-size:14px!important;
  line-height:1.65!important;
}
html body.category .ht123-unified-category-hero .ht123-grade-kicker{
  display:block!important;
  margin:7px 0 0!important;
  color:#3478f6!important;
  font-size:10px!important;
  line-height:1.2!important;
  font-weight:850!important;
  letter-spacing:.09em!important;
}
html body.category .ht123-unified-category-hero .ht123-grade-summary{
  display:flex!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:7px!important;
  margin-top:13px!important;
  color:#66778c!important;
  font-size:11.5px!important;
  font-weight:550!important;
}
html body.category .ht123-unified-category-hero .ht123-grade-summary-dot{
  width:4px!important;
  height:4px!important;
  border-radius:999px!important;
  background:#9caec1!important;
}

/* Make generic cards/sections use exactly the Grade Hub visual language. */
html body.category .ht123-unified-category-nav{margin-top:0!important;}
html body.category .ht123-unified-category-hub .ht123-card-jump{display:block!important;}
html body.category .ht123-unified-category-hub .ht123-card-title,
html body.category .ht123-unified-category-hub .ht123-card-desc{display:block!important;}
html body.category .ht123-unified-category-hub .ht123-card-meta{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
}
html body.category .ht123-unified-category-hub .ht123-card-meta>a{
  color:var(--accent,#3478f6)!important;
  font-weight:750!important;
  text-decoration:none!important;
  white-space:nowrap!important;
}
html body.category .ht123-unified-category-hub .ht123-grade-category-card{
  border-top-color:var(--accent,#3478f6)!important;
}
html body.category .ht123-unified-category-hub .ht123-section-icon,
html body.category .ht123-unified-category-hub .ht123-card-icon{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:color-mix(in srgb,var(--accent,#3478f6) 10%,white)!important;
}
html body.category .ht123-unified-section{border-left-color:var(--accent,#3478f6)!important;scroll-margin-top:62px!important;}
html body.category .ht123-unified-section .ht123-grade-section-head,
html body.category .ht123-unified-direct-section .ht123-grade-section-head{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
}
html body.category .ht123-unified-section .ht123-grade-section-title,
html body.category .ht123-unified-direct-section .ht123-grade-section-title{
  display:flex!important;
  align-items:center!important;
  gap:11px!important;
  min-width:0!important;
}
html body.category .ht123-unified-section .ht123-grade-section-title h2 a,
html body.category .ht123-unified-direct-section .ht123-grade-section-title h2{
  color:#17304d!important;
  text-decoration:none!important;
}

/* Nested category chips shown before article previews. */
html body.category .ht123-unified-subcats{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:7px 10px!important;
  margin:12px 0 13px!important;
  padding:12px!important;
  border:1px solid #e6edf5!important;
  border-radius:11px!important;
  background:#f8fafc!important;
}
html body.category .ht123-unified-subcats>a{
  display:grid!important;
  grid-template-columns:24px minmax(0,1fr) auto 12px!important;
  align-items:center!important;
  gap:7px!important;
  min-height:38px!important;
  padding:7px 9px!important;
  border:1px solid #e1e9f2!important;
  border-radius:8px!important;
  background:#fff!important;
  color:#263b55!important;
  font-size:11.8px!important;
  line-height:1.35!important;
  font-weight:650!important;
  text-decoration:none!important;
}
html body.category .ht123-unified-subcats>a:hover{
  border-color:#b8cdea!important;
  background:#f4f8ff!important;
  color:#0e5cab!important;
}
html body.category .ht123-unified-subcat-icon{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:24px!important;
  height:24px!important;
  border-radius:7px!important;
  background:#eef5ff!important;
  font-size:13px!important;
}
html body.category .ht123-unified-subcats small{
  color:#8190a3!important;
  font-size:10px!important;
  font-weight:600!important;
  white-space:nowrap!important;
}
html body.category .ht123-unified-subcats b{color:#92a3b7!important;font-size:15px!important;font-weight:500!important;}

html body.category .ht123-unified-direct-section{
  margin-top:0!important;
  border-left-color:#3478f6!important;
}
html body.category .ht123-unified-direct-section>.ht123-list-wrap{margin-top:13px!important;}
html body.category .ht123-count{
  display:inline-flex!important;
  align-items:center!important;
  min-height:27px!important;
  padding:5px 9px!important;
  border:1px solid #e0e7ef!important;
  border-radius:999px!important;
  background:#f8fafc!important;
  color:#66778c!important;
  font-size:10.5px!important;
  line-height:1!important;
  font-weight:700!important;
  white-space:nowrap!important;
}

/* ---------- Footer: Primary / THCS / THPT / Info separated ---------- */
html body .ht123-footer-inner{
  grid-template-columns:minmax(245px,1.45fr) repeat(4,minmax(110px,.72fr))!important;
  gap:30px!important;
}
html body .ht123-footer-column.ht123-footer-thcs ul,
html body .ht123-footer-column.ht123-footer-thpt ul{
  grid-template-columns:1fr!important;
}

@media (max-width:1050px){
  html body .ht123-footer-inner{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
  }
  html body .ht123-footer-brand{grid-column:1/-1!important;max-width:620px!important;}
}
@media (max-width:820px){
  html body.category .ht123-unified-category-hero{padding:22px 20px!important;}
  html body.category .ht123-unified-category-hero h1{font-size:27px!important;}
  html body.category .ht123-unified-subcats{grid-template-columns:1fr!important;}
  html body .ht123-footer-inner{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:28px 22px!important;}
  html body .ht123-footer-brand{grid-column:1/-1!important;}
}
@media (max-width:560px){
  html body.category .ht123-unified-category-hero{padding:18px 15px!important;border-radius:14px!important;}
  html body.category .ht123-unified-category-hero h1{font-size:24px!important;}
  html body.category .ht123-unified-title-row{align-items:flex-start!important;}
  html body.category .ht123-unified-title-row .ht123-archive-title-icon{width:36px!important;height:36px!important;flex-basis:36px!important;font-size:18px!important;}
  html body.category .ht123-unified-section .ht123-grade-section-head,
  html body.category .ht123-unified-direct-section .ht123-grade-section-head{align-items:flex-start!important;gap:9px!important;}
  html body.category .ht123-unified-subcats>a{grid-template-columns:24px minmax(0,1fr) 12px!important;}
  html body.category .ht123-unified-subcats small{display:none!important;}
  html body .ht123-footer-inner{grid-template-columns:1fr!important;}
  html body .ht123-footer-brand{grid-column:auto!important;}
}