/* Học Toán 123 - Header / Menu / Footer polish v2.2.3
 * Loaded after the legacy stylesheet so the shell remains consistent site-wide.
 */
:root{
  --ht123-navy:#102a46;
  --ht123-navy-2:#0b1d32;
  --ht123-blue:#17669a;
  --ht123-blue-dark:#0e527f;
  --ht123-line:#dfe7f0;
  --ht123-muted:#65758a;
  --ht123-orange:#f59e0b;
  --ht123-shell-font:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}

html body #top-bar{
  box-sizing:border-box;
  border:0;
  background:#fff;
  font-family:var(--ht123-shell-font);
  box-shadow:none;
}
html body .ht123-top-bar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  min-height:72px;
  padding:13px 22px 12px;
}
html body #top-bar-info.ht123-brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
  float:none;
  padding:0;
  margin:0;
}
html body .ht123-brand-mark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  flex:0 0 42px;
  border:1px solid #d9e7f6;
  border-radius:12px;
  background:linear-gradient(145deg,#eef6ff,#fff7e5);
  color:#1769aa;
  font-family:Georgia,"Times New Roman",serif;
  font-size:26px;
  line-height:1;
  font-weight:700;
  text-decoration:none;
  box-shadow:0 5px 16px rgba(24,70,115,.08);
}
html body .ht123-brand-mark:hover{
  transform:translateY(-1px);
  border-color:#b9d2ee;
}
html body .ht123-brand-copy{min-width:0;}
html body #site-title,
html body #site-title a{
  margin:0!important;
  padding:0!important;
  color:var(--ht123-navy)!important;
  font-family:var(--ht123-shell-font)!important;
  font-size:30px!important;
  line-height:1.04!important;
  font-weight:850!important;
  letter-spacing:-.035em!important;
  text-shadow:none!important;
  text-decoration:none!important;
}
html body #site-title .ht123-brand-accent{color:var(--ht123-orange);}
html body #site-description{
  margin:5px 0 0!important;
  padding:0!important;
  color:var(--ht123-muted)!important;
  font-family:var(--ht123-shell-font)!important;
  font-size:12.5px!important;
  line-height:1.35!important;
  font-weight:520!important;
}
html body #nav-top{margin-left:auto;}
html body #nav-top .nav-top a{
  font-family:var(--ht123-shell-font)!important;
  color:#52657c!important;
  font-size:12px!important;
  font-weight:650!important;
}

/* Main navigation: one clean row on desktop. */
html body #nav-main{
  position:relative;
  z-index:80;
  min-height:42px!important;
  border:0!important;
  border-top:1px solid rgba(255,255,255,.08)!important;
  background:linear-gradient(180deg,#176b9f 0%,#125d8d 100%)!important;
  box-shadow:0 2px 0 rgba(10,42,70,.08)!important;
  font-family:var(--ht123-shell-font)!important;
}
html body #nav-main > ul.nav-main,
html body #nav-main ul.nav-main{
  display:flex!important;
  align-items:stretch!important;
  width:100%!important;
  margin:0!important;
  padding:0!important;
  list-style:none!important;
  flex-wrap:nowrap!important;
}
html body #nav-main ul.nav-main > li{
  position:relative!important;
  display:block!important;
  float:none!important;
  flex:1 1 0!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  border-right:1px solid rgba(255,255,255,.10)!important;
}
html body #nav-main ul.nav-main > li:first-child{border-left:1px solid rgba(255,255,255,.08)!important;}
html body #nav-main ul.nav-main > li > a{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
  min-height:42px!important;
  padding:9px 3px!important;
  color:#fff!important;
  font-family:var(--ht123-shell-font)!important;
  font-size:12px!important;
  line-height:1.15!important;
  font-weight:700!important;
  letter-spacing:-.01em!important;
  text-align:center!important;
  text-shadow:none!important;
  text-decoration:none!important;
  white-space:nowrap!important;
  transition:background .16s ease,color .16s ease!important;
}
html body #nav-main ul.nav-main > li:hover > a,
html body #nav-main ul.nav-main > li.current-menu-item > a,
html body #nav-main ul.nav-main > li.current-menu-parent > a,
html body #nav-main ul.nav-main > li.current-menu-ancestor > a,
html body #nav-main ul.nav-main > li.current-category-ancestor > a{
  background:rgba(5,45,75,.28)!important;
  color:#fff!important;
  box-shadow:inset 0 -3px 0 #f7b733!important;
}
/* Keep legacy dropdowns usable. */
html body #nav-main ul.nav-main ul{
  z-index:90!important;
  min-width:210px!important;
  border:1px solid #d8e2ed!important;
  border-top:0!important;
  background:#fff!important;
  box-shadow:0 12px 28px rgba(14,42,72,.16)!important;
}
html body #nav-main ul.nav-main ul li a{
  color:#233b57!important;
  background:#fff!important;
  font-family:var(--ht123-shell-font)!important;
  font-size:12.5px!important;
  font-weight:620!important;
  text-shadow:none!important;
}
html body #nav-main ul.nav-main ul li a:hover{
  color:#0d5c98!important;
  background:#f3f8fd!important;
}

/* Footer */
html body #bottom-bar{display:none!important;}
html body #ht123-site-footer{
  margin:0;
  border:0;
  background:linear-gradient(180deg,#10233d 0%,#0b1a2e 100%);
  color:#c9d5e4;
  font-family:var(--ht123-shell-font);
}
html body .ht123-footer-inner{
  display:grid;
  grid-template-columns:minmax(260px,1.45fr) minmax(130px,.75fr) minmax(190px,1fr) minmax(150px,.8fr);
  gap:38px;
  padding:38px 30px 30px;
}
html body .ht123-footer-brand{max-width:390px;}
html body .ht123-footer-logo{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:#fff!important;
  text-decoration:none!important;
}
html body .ht123-footer-mark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:11px;
  background:rgba(255,255,255,.08);
  color:#7ec8ff;
  font-family:Georgia,"Times New Roman",serif;
  font-size:24px;
  font-weight:700;
}
html body .ht123-footer-name{
  color:#fff;
  font-size:20px;
  line-height:1;
  font-weight:800;
  letter-spacing:-.02em;
}
html body .ht123-footer-name strong{color:#f7b733;}
html body .ht123-footer-brand p{
  margin:15px 0 0;
  color:#9fb0c5;
  font-size:12.5px;
  line-height:1.7;
}
html body .ht123-footer-column h2{
  margin:3px 0 14px;
  color:#fff;
  font-family:var(--ht123-shell-font);
  font-size:12px;
  line-height:1.3;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
html body .ht123-footer-column ul{
  display:grid;
  gap:8px;
  margin:0;
  padding:0;
  list-style:none;
}
html body .ht123-footer-column li{margin:0;padding:0;}
html body .ht123-footer-column a{
  color:#c3d0df!important;
  font-size:12.5px!important;
  line-height:1.4!important;
  font-weight:540!important;
  text-decoration:none!important;
}
html body .ht123-footer-column a:hover{color:#fff!important;text-decoration:underline!important;text-underline-offset:3px;}
html body .ht123-footer-grade-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px!important;}
html body .ht123-footer-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin:0 30px;
  padding:18px 0 22px;
  border-top:1px solid rgba(255,255,255,.10);
  color:#8598ae;
  font-size:11.5px;
  line-height:1.45;
}
html body .ht123-footer-top{
  display:inline-flex;
  align-items:center;
  gap:7px;
  flex:0 0 auto;
  color:#bac8d8!important;
  font-size:11.5px!important;
  font-weight:650!important;
  text-decoration:none!important;
}
html body .ht123-footer-top span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:8px;
  background:rgba(255,255,255,.06);
}

/* On Grade Hub pages, keep shell aligned with v2.2.2 content width. */
html body.category #top-bar{padding:0!important;}
html body.category .ht123-top-bar-inner{padding-left:26px!important;padding-right:26px!important;}
html body.category #site-title,
html body.category #site-title a{font-size:30px!important;}
html body.category #nav-main .nav-main > li > a{padding-left:3px!important;padding-right:3px!important;font-size:11.75px!important;}
html body.category #ht123-site-footer{border-radius:0 0 16px 16px;overflow:hidden;}

@media (max-width:1050px) and (min-width:841px){
  html body #nav-main ul.nav-main > li > a{
    font-size:11px!important;
    padding-left:2px!important;
    padding-right:2px!important;
  }
  html body .ht123-footer-inner{gap:25px;padding-left:24px;padding-right:24px;}
}

@media (max-width:840px){
  html body .ht123-top-bar-inner{min-height:64px;padding:10px 14px;}
  html body .ht123-brand-mark{width:36px;height:36px;flex-basis:36px;border-radius:10px;font-size:22px;}
  html body #site-title,
  html body #site-title a{font-size:25px!important;}
  html body #site-description{font-size:11.5px!important;}

  /* Frontier drop mode: use the hamburger. Stack mode: keep a single swipeable row. */
  html body #nav-main.drop .nav-main{
    display:none!important;
    flex-direction:column!important;
    width:min(92vw,360px)!important;
    max-height:70vh!important;
    overflow:auto!important;
    background:#125d8d!important;
  }
  html body #nav-main.drop.dropped .nav-main{display:flex!important;}
  html body #nav-main.drop ul.nav-main > li{flex:none!important;width:100%!important;border-right:0!important;border-bottom:1px solid rgba(255,255,255,.10)!important;}
  html body #nav-main.drop ul.nav-main > li > a{justify-content:flex-start!important;padding:11px 14px!important;font-size:13px!important;text-align:left!important;}

  html body #nav-main.stack .nav-main{
    display:flex!important;
    flex-direction:row!important;
    overflow-x:auto!important;
    overflow-y:visible!important;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  html body #nav-main.stack .nav-main::-webkit-scrollbar{display:none;}
  html body #nav-main.stack ul.nav-main > li{flex:0 0 auto!important;width:auto!important;min-width:82px!important;}
  html body #nav-main.stack ul.nav-main > li > a{padding:10px 11px!important;font-size:11.5px!important;}

  html body .ht123-footer-inner{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:28px 24px;
    padding:32px 22px 26px;
  }
  html body .ht123-footer-brand{grid-column:1/-1;max-width:620px;}
  html body .ht123-footer-bottom{margin:0 22px;padding-bottom:20px;}
}

@media (max-width:560px){
  html body .ht123-top-bar-inner{gap:9px;padding:9px 12px;}
  html body .ht123-brand-mark{width:34px;height:34px;flex-basis:34px;}
  html body #site-title,
  html body #site-title a{font-size:22px!important;}
  html body #site-description{margin-top:3px!important;font-size:10.8px!important;}
  html body #nav-top{display:none!important;}
  html body .ht123-footer-inner{grid-template-columns:1fr;gap:24px;padding:29px 18px 24px;}
  html body .ht123-footer-brand{grid-column:auto;}
  html body .ht123-footer-grade-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  html body .ht123-footer-bottom{align-items:flex-start;flex-direction:column;margin:0 18px;padding:16px 0 20px;}
}