/* Học Toán 123 - Modern single-post layout v2.2.7
 * Full-width reading column, integrated TOC, modern related/navigation/comment UI.
 * Loaded last only on single posts so archives/pages remain untouched.
 */
:root{
  --ht123-single-font:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --ht123-single-navy:#102a46;
  --ht123-single-blue:#3478f6;
  --ht123-single-blue-dark:#155da0;
  --ht123-single-text:#233548;
  --ht123-single-muted:#6a7a8d;
  --ht123-single-line:#dfe7f0;
  --ht123-single-bg:#eef3f8;
  --ht123-single-card:#fff;
}

html body.single-post{
  background:var(--ht123-single-bg)!important;
  color:var(--ht123-single-text)!important;
  font-family:var(--ht123-single-font)!important;
}
html body.single-post #container{
  width:min(1180px,calc(100% - 32px))!important;
  max-width:1180px!important;
  margin:24px auto!important;
  background:#fff!important;
  border:1px solid #dfe6ee!important;
  border-radius:16px!important;
  box-shadow:0 14px 42px rgba(26,52,82,.10)!important;
  overflow:visible!important;
}
html body.single-post #main,
html body.single-post #main.col-cs,
html body.single-post #main.col-sc,
html body.single-post #main.col-scs,
html body.single-post #main.col-ssc,
html body.single-post #main.col-css{
  width:100%!important;
  max-width:1180px!important;
  min-height:0!important;
  margin:0 auto!important;
  padding:28px 32px 46px!important;
  box-sizing:border-box!important;
  background:#f4f7fb!important;
  float:none!important;
}
html body.single-post #content.ht123-single-content,
html body.single-post #content{
  width:100%!important;
  max-width:none!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  float:none!important;
  box-sizing:border-box!important;
  background:transparent!important;
  border:0!important;
}
html body.single-post #sidebar-left,
html body.single-post #sidebar-right,
html body.single-post #sidebar-left-tu-tao{
  display:none!important;
}

/* Main reading width */
html body.single-post article.single-view,
html body.single-post .post-nav,
html body.single-post .relatedcat,
html body.single-post #comment-area,
html body.single-post #widgets-wrap-after-post,
html body.single-post #widgets-wrap-before-content,
html body.single-post #widgets-wrap-after-content{
  width:100%!important;
  max-width:1020px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  box-sizing:border-box!important;
}
html body.single-post article.single-view{
  padding:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}

/* Article title / meta */
html body.single-post .single-view .entry-header{
  margin:0!important;
  padding:24px 28px 16px!important;
  border:1px solid var(--ht123-single-line)!important;
  border-top:4px solid var(--ht123-single-blue)!important;
  border-bottom:0!important;
  border-radius:16px 16px 0 0!important;
  background:linear-gradient(135deg,#fff 0%,#fff 75%,#f1f6ff 100%)!important;
  box-shadow:none!important;
}
html body.single-post .single-view .breadcrumbs,
html body.single-post .single-view #breadcrumbs{
  margin:0 0 12px!important;
  padding:0!important;
  color:#718198!important;
  font-size:12px!important;
  line-height:1.55!important;
}
html body.single-post .single-view .breadcrumbs a{
  color:#3f6f9e!important;
  text-decoration:none!important;
}
html body.single-post .single-view .entry-title{
  margin:0!important;
  padding:0!important;
  color:var(--ht123-single-navy)!important;
  font-family:var(--ht123-single-font)!important;
  font-size:clamp(27px,3.1vw,38px)!important;
  line-height:1.22!important;
  font-weight:820!important;
  letter-spacing:-.03em!important;
  text-shadow:none!important;
}
html body.single-post .single-view .entry-byline{
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  gap:8px 14px!important;
  margin:0!important;
  padding:0 28px 19px!important;
  border:1px solid var(--ht123-single-line)!important;
  border-top:0!important;
  border-radius:0 0 16px 16px!important;
  background:#fff!important;
  color:var(--ht123-single-muted)!important;
  font-family:var(--ht123-single-font)!important;
  font-size:12px!important;
  line-height:1.4!important;
}
html body.single-post .single-view .entry-byline>div,
html body.single-post .single-view .entry-byline>a{
  margin:0!important;
  padding:0!important;
  float:none!important;
}
html body.single-post .single-view .entry-byline a{
  color:#3c6e9e!important;
  text-decoration:none!important;
}
html body.single-post .single-view .entry-byline .genericon{color:#7991a9!important;}

/* Article content */
html body.single-post .single-view .entry-content{
  width:100%!important;
  max-width:none!important;
  min-height:0!important;
  overflow-x:auto!important;
  overflow-y:visible!important;
  box-sizing:border-box!important;
  margin:18px 0 0!important;
  padding:28px 32px 32px!important;
  border:1px solid var(--ht123-single-line)!important;
  border-radius:16px!important;
  background:var(--ht123-single-card)!important;
  color:var(--ht123-single-text)!important;
  font-family:var(--ht123-single-font)!important;
  font-size:16.5px!important;
  line-height:1.75!important;
  word-break:normal!important;
  box-shadow:0 6px 20px rgba(31,64,104,.045)!important;
}
html body.single-post .entry-content p{
  margin:0 0 16px!important;
  line-height:1.75!important;
}
html body.single-post .entry-content h2,
html body.single-post .entry-content h3,
html body.single-post .entry-content h4{
  color:var(--ht123-single-navy)!important;
  font-family:var(--ht123-single-font)!important;
  font-weight:780!important;
  letter-spacing:-.02em!important;
  scroll-margin-top:82px!important;
}
html body.single-post .entry-content h2{
  margin:30px 0 13px!important;
  padding:0 0 9px!important;
  border-bottom:1px solid #e8eef5!important;
  font-size:24px!important;
  line-height:1.35!important;
}
html body.single-post .entry-content h3{
  margin:24px 0 10px!important;
  font-size:20px!important;
  line-height:1.4!important;
}
html body.single-post .entry-content h4{
  margin:20px 0 8px!important;
  font-size:17.5px!important;
  line-height:1.45!important;
}
html body.single-post .entry-content ul,
html body.single-post .entry-content ol{
  margin:12px 0 18px!important;
  padding-left:25px!important;
}
html body.single-post .entry-content li{margin:6px 0!important;line-height:1.68!important;}
html body.single-post .entry-content a{
  color:#1769aa!important;
  text-decoration:underline!important;
  text-decoration-thickness:1px!important;
  text-underline-offset:3px!important;
}
html body.single-post .entry-content a:hover{color:#0e4f83!important;font-weight:inherit!important;}
html body.single-post .entry-content blockquote{
  margin:20px 0!important;
  padding:16px 19px!important;
  border-left:4px solid #67a1f7!important;
  border-radius:0 10px 10px 0!important;
  background:#f5f9ff!important;
}

/* Tables and formula-friendly overflow */
html body.single-post .entry-content table{
  width:100%!important;
  max-width:100%!important;
  margin:20px 0!important;
  border-collapse:separate!important;
  border-spacing:0!important;
  border:1px solid #d9e2ec!important;
  border-radius:10px!important;
  overflow:hidden!important;
  background:#fff!important;
  font-size:15px!important;
}
html body.single-post .entry-content th,
html body.single-post .entry-content td{
  padding:11px 13px!important;
  border-right:1px solid #e2e8f0!important;
  border-bottom:1px solid #e2e8f0!important;
  vertical-align:top!important;
  line-height:1.55!important;
}
html body.single-post .entry-content th{background:#f5f8fc!important;color:#253b54!important;font-weight:750!important;}
html body.single-post .entry-content tr:last-child td{border-bottom:0!important;}
html body.single-post .entry-content tr>*:last-child{border-right:0!important;}
html body.single-post .MathJax,
html body.single-post mjx-container{max-width:100%!important;}
html body.single-post mjx-container[display="true"]{overflow-x:auto!important;overflow-y:hidden!important;padding:4px 0!important;}

/* Scanned exams / illustrations: never float or stretch vertically. */
html body.single-post .entry-content img,
html body.single-post .entry-content img.alignnone,
html body.single-post .entry-content img.aligncenter,
html body.single-post .entry-content img.size-full,
html body.single-post .entry-content img.size-medium,
html body.single-post .entry-content img.size-large{
  display:block!important;
  float:none!important;
  clear:both!important;
  width:auto!important;
  max-width:100%!important;
  height:auto!important;
  max-height:none!important;
  margin:20px auto!important;
  object-fit:contain!important;
}
html body.single-post .entry-content figure,
html body.single-post .entry-content .wp-caption{
  float:none!important;
  clear:both!important;
  width:auto!important;
  max-width:100%!important;
  height:auto!important;
  margin:22px auto!important;
}
html body.single-post .entry-content .wp-caption img{margin:0 auto!important;}
html body.single-post .entry-content .wp-caption-text,
html body.single-post .entry-content figcaption{
  margin:8px auto 0!important;
  color:#728197!important;
  font-size:12.5px!important;
  line-height:1.55!important;
  text-align:center!important;
}
/* Neutralize legacy clear/float helpers that can create giant blank gaps. */
html body.single-post .entry-content .alignleft,
html body.single-post .entry-content .alignright{
  float:none!important;
  max-width:100%!important;
  margin:18px auto!important;
}
html body.single-post .entry-content p:empty{display:none!important;margin:0!important;padding:0!important;}

/* TOC: keep it inside the reading flow instead of floating over the page. */
html body.single-post .table-of-content{
  position:static!important;
  inset:auto!important;
  top:auto!important;
  right:auto!important;
  bottom:auto!important;
  left:auto!important;
  transform:none!important;
  box-sizing:border-box!important;
  width:100%!important;
  max-width:none!important;
  max-height:none!important;
  overflow:visible!important;
  margin:18px 0 24px!important;
  padding:16px 18px!important;
  border:1px solid #d9e5f2!important;
  border-radius:12px!important;
  background:#f7faff!important;
  box-shadow:none!important;
  color:#29415d!important;
}
html body.single-post .table-of-content-title,
html body.single-post .table-of-content .muc-luc{
  color:#173d65!important;
  font-size:14px!important;
  font-weight:800!important;
}
html body.single-post .table-of-content ol,
html body.single-post .table-of-content ul,
html body.single-post .table-of-content #toc-list{
  margin:9px 0 0!important;
  padding-left:0!important;
}
html body.single-post .table-of-content li{
  margin:5px 0!important;
  list-style:none!important;
}
html body.single-post .table-of-content li a{
  color:#31597e!important;
  font-size:13px!important;
  line-height:1.5!important;
  text-decoration:none!important;
}
html body.single-post .table-of-content li a:hover{color:#0e65a8!important;text-decoration:underline!important;}
html body.single-post .table-of-content li.level-2{margin-left:14px!important;}
html body.single-post .table-of-content li.level-3{margin-left:28px!important;}
html body.single-post .table-of-content li.level-4{margin-left:42px!important;}
html body.single-post .table-of-content li.level-5{margin-left:56px!important;}
html body.single-post .table-of-content-button,
html body.single-post .table-of-content-close{display:none!important;}

/* Download button / post footer */
html body.single-post .downbox{margin:18px auto!important;text-align:center!important;}
html body.single-post .downbox .btn.btn-down{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:44px!important;
  padding:10px 20px!important;
  border:0!important;
  border-radius:10px!important;
  background:#1769aa!important;
  color:#fff!important;
  font-family:var(--ht123-single-font)!important;
  font-size:14px!important;
  font-weight:750!important;
  text-decoration:none!important;
  box-shadow:0 7px 18px rgba(23,105,170,.16)!important;
}
html body.single-post .single-view .entry-footer{
  margin:14px 0 0!important;
  padding:12px 4px 0!important;
  border:0!important;
  background:transparent!important;
  color:#718096!important;
  font-size:11.5px!important;
}
html body.single-post .single-view .entry-tags a{
  display:inline-flex!important;
  margin:5px 4px 0 0!important;
  padding:5px 8px!important;
  border:1px solid #dfe7f0!important;
  border-radius:999px!important;
  background:#fff!important;
  color:#4c6580!important;
  text-decoration:none!important;
}

/* Related sections */
html body.single-post #relatedpost,
html body.single-post .relatedcat{
  box-sizing:border-box!important;
  margin-top:18px!important;
  margin-bottom:0!important;
  padding:22px 24px!important;
  border:1px solid var(--ht123-single-line)!important;
  border-radius:14px!important;
  background:#fff!important;
  box-shadow:0 5px 18px rgba(31,64,104,.04)!important;
}
html body.single-post #relatedpost{width:100%!important;max-width:none!important;}
html body.single-post .related-title{
  margin:0 0 14px!important;
  padding:0!important;
  border:0!important;
  color:var(--ht123-single-navy)!important;
  font-family:var(--ht123-single-font)!important;
  font-size:19px!important;
  line-height:1.35!important;
  font-weight:800!important;
}
html body.single-post .related-title span{
  display:block!important;
  padding:0!important;
  background:none!important;
  color:inherit!important;
  border-radius:0!important;
}
html body.single-post #relatedpost ul,
html body.single-post .related-posts-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:8px 10px!important;
  margin:0!important;
  padding:0!important;
  background:transparent!important;
  list-style:none!important;
}
html body.single-post #relatedpost ul li,
html body.single-post .related-posts-grid .related-post-item,
html body.single-post .related-posts-grid li{
  position:relative!important;
  box-sizing:border-box!important;
  margin:0!important;
  padding:0!important;
  border:1px solid #e2e9f1!important;
  border-radius:9px!important;
  background:#fbfcfe!important;
  list-style:none!important;
}
html body.single-post #relatedpost ul li a,
html body.single-post .related-posts-grid li a{
  display:block!important;
  padding:10px 30px 10px 13px!important;
  color:#29415c!important;
  font-family:var(--ht123-single-font)!important;
  font-size:13px!important;
  line-height:1.45!important;
  font-weight:620!important;
  text-decoration:none!important;
}
html body.single-post #relatedpost ul li a:after,
html body.single-post .related-posts-grid li a:after{
  content:"›";
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  color:#90a0b2;
  font-size:17px;
}
html body.single-post #relatedpost ul li:hover,
html body.single-post .related-posts-grid .related-post-item:hover{border-color:#c9d9ea!important;background:#f6faff!important;}
html body.single-post #relatedpost ul li a:hover,
html body.single-post .related-posts-grid li a:hover{color:#105e9c!important;font-weight:650!important;}

/* Previous / next cards */
html body.single-post .ht123-post-nav{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:12px!important;
  margin-top:18px!important;
  margin-bottom:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
}
html body.single-post .ht123-post-nav-card{
  display:flex!important;
  flex-direction:column!important;
  gap:6px!important;
  min-height:88px!important;
  box-sizing:border-box!important;
  padding:15px 17px!important;
  border:1px solid var(--ht123-single-line)!important;
  border-radius:12px!important;
  background:#fff!important;
  color:var(--ht123-single-navy)!important;
  text-decoration:none!important;
  box-shadow:0 4px 14px rgba(31,64,104,.035)!important;
}
html body.single-post .ht123-post-nav-next{text-align:right!important;align-items:flex-end!important;}
html body.single-post .ht123-post-nav-card:hover{border-color:#bcd2e8!important;background:#f8fbff!important;}
html body.single-post .ht123-post-nav-label{color:#6c8095!important;font-size:11px!important;font-weight:750!important;text-transform:uppercase!important;letter-spacing:.04em!important;}
html body.single-post .ht123-post-nav-card strong{font-size:13px!important;line-height:1.45!important;font-weight:700!important;}
html body.single-post .ht123-post-nav-empty{visibility:hidden!important;}

/* Comments */
html body.single-post #comment-area{
  margin-top:18px!important;
  padding:24px!important;
  border:1px solid var(--ht123-single-line)!important;
  border-radius:14px!important;
  background:#fff!important;
  box-shadow:0 5px 18px rgba(31,64,104,.04)!important;
  font-family:var(--ht123-single-font)!important;
}
html body.single-post #comment-area h3,
html body.single-post #comment-area .comment-reply-title{
  margin:0 0 9px!important;
  color:var(--ht123-single-navy)!important;
  font-size:20px!important;
  line-height:1.35!important;
  font-weight:800!important;
}
html body.single-post #comment-area p{color:#5f7083!important;font-size:13px!important;line-height:1.6!important;}
html body.single-post #comment-area label{display:block!important;margin:0 0 5px!important;color:#34495f!important;font-size:12px!important;font-weight:700!important;}
html body.single-post #comment-area input[type="text"],
html body.single-post #comment-area input[type="email"],
html body.single-post #comment-area input[type="url"],
html body.single-post #comment-area textarea{
  box-sizing:border-box!important;
  width:100%!important;
  max-width:100%!important;
  padding:11px 12px!important;
  border:1px solid #ccd8e5!important;
  border-radius:9px!important;
  background:#fff!important;
  color:#24384e!important;
  font:inherit!important;
  box-shadow:none!important;
}
html body.single-post #comment-area textarea{min-height:150px!important;resize:vertical!important;}
html body.single-post #comment-area input:focus,
html body.single-post #comment-area textarea:focus{outline:2px solid rgba(52,120,246,.16)!important;border-color:#78a6ee!important;}
html body.single-post #comment-area .form-submit input,
html body.single-post #comment-area input[type="submit"]{
  min-height:42px!important;
  padding:9px 17px!important;
  border:0!important;
  border-radius:9px!important;
  background:#1769aa!important;
  color:#fff!important;
  font-family:var(--ht123-single-font)!important;
  font-size:13px!important;
  font-weight:750!important;
  cursor:pointer!important;
}

/* Footer follows the same rounded shell on single posts. */
html body.single-post #ht123-site-footer{border-radius:0 0 16px 16px!important;overflow:hidden!important;}

@media (max-width:900px){
  html body.single-post #container{width:min(100% - 18px,1180px)!important;margin:10px auto!important;border-radius:13px!important;}
  html body.single-post #main{padding:20px 16px 34px!important;}
  html body.single-post .single-view .entry-header{padding:20px 20px 13px!important;}
  html body.single-post .single-view .entry-byline{padding:0 20px 17px!important;}
  html body.single-post .single-view .entry-content{padding:23px 21px 27px!important;font-size:16px!important;}
  html body.single-post #relatedpost,
  html body.single-post .relatedcat,
  html body.single-post #comment-area{padding:20px!important;}
}

@media (max-width:680px){
  html body.single-post #container{width:100%!important;margin:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;}
  html body.single-post #main{padding:14px 10px 28px!important;}
  html body.single-post .single-view .entry-header{padding:18px 15px 12px!important;border-radius:13px 13px 0 0!important;}
  html body.single-post .single-view .entry-title{font-size:25px!important;line-height:1.25!important;}
  html body.single-post .single-view .entry-byline{gap:7px 10px!important;padding:0 15px 15px!important;border-radius:0 0 13px 13px!important;}
  html body.single-post .single-view .entry-content{margin-top:12px!important;padding:20px 15px 24px!important;border-radius:13px!important;font-size:16px!important;line-height:1.72!important;}
  html body.single-post .entry-content h2{font-size:21px!important;margin-top:26px!important;}
  html body.single-post .entry-content h3{font-size:18.5px!important;}
  html body.single-post .entry-content table{min-width:580px!important;font-size:14px!important;}
  html body.single-post #relatedpost ul,
  html body.single-post .related-posts-grid,
  html body.single-post .ht123-post-nav{grid-template-columns:1fr!important;}
  html body.single-post .ht123-post-nav-empty{display:none!important;}
  html body.single-post .ht123-post-nav-next{text-align:left!important;align-items:flex-start!important;}
  html body.single-post #relatedpost,
  html body.single-post .relatedcat,
  html body.single-post #comment-area{margin-top:12px!important;padding:18px 15px!important;border-radius:13px!important;}
  html body.single-post .table-of-content{padding:14px!important;}
}