/*
Theme Name:     Học Toán 123
Template:       frontier
Version: 2.2.4
*/
/* Your modification goes here */
@media screen and (max-width:840px){
	#nav-main .nav-main {
    position: absolute;
	}
    #nav-main .genericon-menu {
    color: #FFF;
    font-size: 30px;
    height: auto;
    padding: 5px 10px;
    width: auto;
    float: left;
    }
    #nav-main.dropped .nav-main {
		margin: 40px 0 0 !important;
		width: 50%;
    }
}
#nav-main .nav-main a {
    display: block;
    padding: 8px 5px;
    color: #FFF;
    font-family: 'Roboto Condensed', Sans-serif;
    font-size: 16px;
    text-shadow: 0 0 2px #222;
}
.widget_search .search-form {
    display: flex;
}
.widget_search .search-form label {
    width: 70%;
}
ul {
padding-left: 5px;
}
/* css trang chủ */
@media (min-width: 768px){
.seriesbox {
    width: 50% !important;
}
	#trang-home {
    display: flex;
}	
	.sidebar-trang-chu {
    width: 25%;
}
	}
#trang-home #sidebar-right {
    width: 100% !important;
}
#trang-chu {
	background-color: #fff;
}
.mo-ta-trang-chu {
    color: #444444;
    padding: 10px 5px 15px 5px;
}
.mo-ta-trang-chu h1 {
    font-size: 18px;
    text-transform: uppercase;
    line-height: 25px;
	padding: 0 10px;
    margin-bottom: 12px;
	font-weight: bold;
}
.mo-ta-trang-chu .cat-desc {
    border: 1px solid #eaf5fb;
    background-color: #eaf5fb;
    color: #444444;
    padding: 5px 15px;
    margin-bottom: 15px;
    line-height: 25px;
}
.row.static-home-section {
    padding-left: 5px;
}
.static-home-section h2 {
    font-size: 1.2em;
    font-weight: bold;
    padding: 10px 10px;
    background-color: #428CDB;
    color: #fff;
}
.col-sm-6 li.cac-danh-muc-con {
    list-style: none;
    margin-left: 15px;
    padding-left: 30px;
    background: url(https://hoctoan123.com/wp-content/images/icon-cat.png) no-repeat scroll 0px center transparent;
}
#trang-chu ul.category-con li.cac-danh-muc-con a {
    font-size: 17px;
	line-height: 24px;
}
@media (min-width: 768px){
.col-sm-6 {
    width: 33.33%;
  float: left;
}
}

@media (max-width: 768px){
.col-sm-6 {
    width: 50%;
  float: left;
}
}
@media (max-width: 768px){
.mobile-tieu-hoc {
display: flex;
}
}

.list-child-cats {
    padding: 5px 15px;
}

/* tạo tab */

/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}
.hien-thi-chuyen-muc .tab h2 {
    font-size: 1.1em;
}
/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

/* css bài viết */
.single-view .entry-content {
    overflow-x: auto;
}
.entry-title a {
    font-size: 1.2em;
}
.entry-content a:hover {
    font-weight: bolder;
}
.entry-content h2 {
    font-size: 1.4em;
	line-height: 24px;
}
.entry-content h3 {
    font-size: 1.3em;
}
.wp-caption .wp-caption-text, .gallery-caption {
    text-align: center;
}
/* css chuyên mục */
.archive-description {
    font-size: 1.2em;
    line-height: 24px;
}
#content .chuong h3 {
    font-size: 1.2em;
}
.blog-view li.list-bai-viet {
    list-style: decimal;
}
.blog-view h2.entry-title {
    font-size: 1.35em;
}
ul.noi-dung-chuong {
padding-left: 10px;
}
#category-ly-thuyet-toan, #category-giai-bai-tap-sgk, #category-giai-vo-bai-tap, #category-de-thi-toan, #category-de-thi-toan-5-vao-6, #category-bai-tap-tuan, #de-thi-toan-vao-lop-10 {
    background-color: #FFF;
}
#category-ly-thuyet-toan li.list-bai-viet {
    list-style: decimal;
}
#relatedtag, #relatedcat {
    padding-top: 8px;
    margin-bottom: 15px;
}
h5.related-title {
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    margin: 0 0 15px;
    border-bottom: solid 2px #2A5A8E;
    line-height: 30px;
}
.related-title span {
    background-color: #2A5A8E;
    display: inline-block;
    padding: 0 20px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}
#relatedtag ul li{
    list-style-type: square;
}
#relatedpost ul li {
list-style: square !important;
}
#relatedpost ul li a {
font-size: 15px;
	color: #333;
	font-family: Arimo, Sans-serif;
}
#relatedpost ul li a:hover {
	color: #FC8B07;
}
#relatedtag ul li a{
    font-size: 15px;
	color: #333;
font-family: Arimo, Sans-serif;
}
#relatedtag ul li a:hover {
	color: #FC8B07;
}
#relatedcat ul li{
    list-style-type: square;
}
#relatedcat ul li a{
    font-size: 15px;
	color: #333;
font-family: Arimo, Sans-serif;
}
#relatedcat ul li a:hover {
	color: #FC8B07;
}
/* css sidebar bài viết */
.accordion b {
    line-height: 16px;
}
.col-scs #sidebar-left-tu-tao {
  float: left;
    margin-left: -4px;
    width: 20%;
}
.col-scs #sidebar-left-tu-tao .noi-dung-ly-thuyet{
background-color: #FFF;
    margin: 0 0 10px;
    padding: 8px;
    border: 1px solid #555;
    box-shadow: 0 0 2px #333;
    word-wrap: break-word;
}
.col-scs #sidebar-left-tu-tao ul {
    margin-top: 4px;
    margin-bottom: 0;
    padding-left: 0;
}
.chuong {
    padding-bottom: 10px;
}
#sidebar-left-tu-tao li.list-bai-viet {
    margin-left: 0;
}
#sidebar-left .danh-muc-toan-cac-lop {
    background-color: #FFF;
    margin: 0 0 10px;
    padding: 8px;
    border: 1px solid #555;
    box-shadow: 0 0 2px #333;
    word-wrap: break-word;
}
#sidebar-left .list-toan-cac-lop {
    padding-bottom: 10px;
}
.bai-viet-cung-chuyen-muc {
    background-color: #FFF;
    margin: 0 0 10px;
    padding: 8px;
    border: 1px solid #555;
    box-shadow: 0 0 2px #333;
    word-wrap: break-word;
}
.giai-bai-tap-sgk, .bai-tap-tuan-toan, .de-thi-toan, .giai-vo-bai-tap, .chuyen-de-bat-dang-thuc, .chuyen-de-toan, .sach-toan-lop {
    background-color: #FFF;
    margin: 0 0 10px;
    padding: 8px;
    border: 1px solid #555;
    box-shadow: 0 0 2px #333;
    word-wrap: break-word;
}
.textwidget .chuyen-de-toan li.cac-danh-muc-con {
    list-style: none;
    margin-left: 0;
    background: none;
padding: 5px 0;
    border-bottom: 1px solid #E0E0E0;
}
.pagenavi{
 
margin: 20px 0 20px 0;
 
}
 
.pagenavi span,.pagenavi a{color: #4d4d4d;padding:3px;margin-right:5px;background:transparent;border:1px solid #757575}
 
.pagenavi a:hover,.pagenavi .current{background:transparent;color:#4d4d4d;text-decoration:none}
 
.pagenavi .page-numbers,.pagenavi .current{color: #4d4d4d;font-weight:bold}
 
.pagenavi .current{color: red;}
 
.pagenavi .page-numbers{border:1px solid #DDD;padding: 8px; border-radius: 8px;}
/* css tải về */
.downbox {
    text-align: center;
    position: relative;
}
.downbox .btn.btn-down {
    color: #fff;
    background: #428CDB;
}
.downbox .btn.btn-down:hover{background-color:#8F802B}
.downbox .btn {
    min-width: 168px;
    margin-right: 16px;
    border-radius: 3px;
    font-size: 1.5em;
    margin-bottom: 16px;
    line-height: 38px;
    padding: 0 8px;
    display: inline-block;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
}
.downbox .btn.btn-down span {
    background: url(https://hoctoan123.com/wp-content/images/tai-ve.png) no-repeat 0 center;
    display: inline-block;
    line-height: 38px;
    padding-left: 32px;
}
.downbox .btn.btn-pdfviewer:hover {
    background-color: #ff9800;
}
.downbox .btn.btn-pdfviewer {
    color: #fff;
    background: #f57c00;
}
.wpp-list li {
    overflow: visible !important;
	margin-left: 0;
}
.container-download h1.entry-title {
    font-size: 24px;
    padding-bottom: 15px;
}
.d-none{
	display: none!important;
}

.btn-down{
	display: inline-block;
    width: 100px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    background: red;
    border-radius: 5px;
    color: white;
    font-weight: bold;
	margin-top: 20px;
}
.seriesbox {
    width: auto;
    height: 200px;
    overflow-x: hidden;
    overflow-y: scroll;
}
.seriesmeta {
    background-color: #E5F3FF;
    font-size: .8em;
    padding: 0;
    margin-bottom: 10px;
}
@-webkit-keyframes my {
	 0% { color: #F8CD0A; } 
	 50% { color: #fff;  } 
	 100% { color: #F8CD0A;  } 
 }
 @-moz-keyframes my { 
	 0% { color: #F8CD0A;  } 
	 50% { color: #fff;  }
	 100% { color: #F8CD0A;  } 
 }
 @-o-keyframes my { 
	 0% { color: #F8CD0A; } 
	 50% { color: #fff; } 
	 100% { color: #F8CD0A;  } 
 }
 @keyframes my { 
	 0% { color: #F8CD0A;  } 
	 50% { color: #fff;  }
	 100% { color: #F8CD0A;  } 
 } 
 .btn-down span {
         background:#3d3d3d;
         font-size:24px;
         font-weight:bold;
	 -webkit-animation: my 700ms infinite;
	 -moz-animation: my 700ms infinite; 
	 -o-animation: my 700ms infinite; 
	 animation: my 700ms infinite;
}

.bai-tin-tuc h2,
.bai-cung-chuyen-muc h2 {
margin-left: 15px;
}
.bai-tin-tuc ul li,
.bai-cung-chuyen-muc ul li {
margin-left: 35px;
    list-style: square;
}
.bai-viet-cung-chuyen-muc ul li {
margin-left: 0;
padding: 5px 0;
border-bottom: 1px solid #E0E0E0;
}
ul.de-thi, ul.chuyen-de, .bai-viet-tin-tuc {
    height: 200px;
    overflow-y: auto;
}

#sidebar-right #seriestoc-2 ul{
    height: 200px;
    overflow-y: auto;
}
/* css back to top */
#back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none;
    width: 40px;
    height: 40px;
    background-color: #0059a7;
    color: white;
    text-align: center;
    line-height: 40px;
    font-size: 24px;
    cursor: pointer;
    z-index: 1000;
    transition: opacity 0.3s, visibility 0.3s;
}

#back-to-top.show {
    display: block;
}

@media only screen and (max-width: 600px) {
    #back-to-top {
        width: 30px;
        height: 30px;
        line-height: 30px;
        font-size: 20px;
        bottom: 10px;
        right: 10px;
    }
}
/* css mục lục bài viết */
 .table-of-content ol > li {
    list-style-type: none;
}
span.table-of-content-title {
    font-weight: 600;
	font-size: 1rem;
}
 .table-of-content {
  max-height: calc(100vh - 30px); /* Chiều cao tối đa của mục lục */
  overflow-y: auto; /* Cuộn dọc nếu cần */
  background: #fff; /* Màu nền trắng */
  border: 1px solid #ddd; /* Đường viền mỏng */
  border-radius: 5px; /* Bo góc */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Đổ bóng */
  padding: 15px; /* Khoảng cách bên trong */
  z-index: 1000; /* Đảm bảo hiển thị trên các phần tử khác */
}
          .table-of-content .muc-luc {
            font-weight: bold;
          }
          .table-of-content #toc-list {
            list-style: none;
            padding-left: 0;
          }
          .table-of-content li {
            margin-bottom: 5px;
          }
          .table-of-content li a {
            text-decoration: none;
            color: #333;
			font-size: 0.95rem;
          }
          .table-of-content li a:hover {
            text-decoration: underline;
          }
          /* Lùi sang phải cho các cấp nhỏ hơn */
          .table-of-content li.level-2 {
            margin-left: 20px;
          }
          .table-of-content li.level-3 {
            margin-left: 40px;
          }
          .table-of-content li.level-4 {
            margin-left: 60px;
          }
          .table-of-content li.level-5 {
            margin-left: 80px;
          }

/* CSS cho mục lục trên thiết bị di động */
@media (max-width: 1224px) {
  .table-of-content {
    position: fixed; /* Đặt mục lục cố định để không di chuyển khi cuộn trang */
    bottom: 0; /* Đặt mục lục ở chân trang */
    left: 0; /* Đặt mục lục sát bên trái màn hình */
    width: 100%; /* Chiều rộng toàn bộ màn hình */
    max-height: 0; /* Chiều cao tối đa ban đầu là 0 để ẩn mục lục */
    overflow-y: hidden; /* Ẩn cuộn dọc khi chưa mở */
    background: #fff; /* Màu nền trắng */
    border: none; /* Loại bỏ đường viền */
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); /* Đổ bóng lên phía trên */
    padding: 0; /* Xóa padding khi ẩn */
    transition: max-height 0.3s ease, padding 0.3s ease; /* Hiệu ứng chuyển tiếp cho việc mở và thu hẹp */
    z-index: 1000; /* Đảm bảo hiển thị trên các phần tử khác */
    box-sizing: border-box; /* Bao gồm padding và border trong kích thước tổng thể */
  }

  .table-of-content.open {
    max-height: calc(100vh - 70px); /* Chiều cao tối đa khi mở */
    overflow-y: auto; /* Cho phép cuộn dọc khi cần */
    padding: 15px; /* Padding khi mở */
    border: 1px solid #ddd; /* Đặt viền khi mở */
  }

  .table-of-content-button {
    position: fixed; /* Đặt vị trí cố định để không di chuyển khi cuộn trang */
    bottom: 10px; /* Khoảng cách từ dưới cùng */
    left: 10px; /* Khoảng cách từ bên trái */
    width: 50px; /* Chiều rộng của nút */
    height: 50px; /* Chiều cao của nút */
    background-color: #007bff; /* Màu nền của nút */
    color: #fff; /* Màu chữ của nút */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%; /* Bo góc tròn */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Đổ bóng */
    cursor: pointer;
    font-size: 1.5em;
    font-weight: bold;
    text-align: center;
    z-index: 1001; /* Đảm bảo nút nằm trên mục lục */
    transition: background-color 0.3s ease; /* Hiệu ứng chuyển màu nền khi nhấp */
  }

  .table-of-content-button.open {
    background-color: #ff5722; /* Màu nền khi mục lục đang mở */
  }

  .table-of-content-close {
    position: absolute; /* Đặt nút tắt ở góc trên cùng bên phải */
    top: 10px; /* Khoảng cách từ trên cùng */
    right: 10px; /* Khoảng cách từ bên phải */
    font-size: 2em; /* Kích thước chữ lớn để dễ nhấp vào */
    cursor: pointer;
    color: #007bff; /* Màu chữ của nút tắt */
  }
}
.related-posts-grid {
    background-color: #fff;
}
.related-posts-grid li{
    list-style: square !important;
}
/* =========================================================
   HỌC TOÁN 123 - CLEAN LIST UI v2.0.0
   ========================================================= */
body.home #main,
body.category #main { max-width: 1180px; margin: 0 auto; }
body.home #content,
body.category #content { width: 100% !important; float: none !important; box-sizing: border-box; }
.ht123-home,.ht123-archive-page { background:#fff; padding:18px; }
.ht123-hero { padding:22px; border:1px solid #e6e8eb; border-radius:12px; margin-bottom:24px; }
.ht123-hero h1,.ht123-archive-header h1 { margin:0 0 10px; font-size:28px; line-height:1.3; }
.ht123-hero p,.ht123-archive-description,.ht123-term-desc { color:#555; line-height:1.7; }
.ht123-home-block { margin:28px 0; }
.ht123-home-title,.ht123-section-heading { display:flex; align-items:baseline; justify-content:space-between; gap:12px; border-bottom:2px solid #eceff2; margin-bottom:14px; }
.ht123-home-title h2,.ht123-section-heading h2 { margin:0; padding:0 0 8px; font-size:22px; }
.ht123-home-title p,.ht123-count { margin:0; color:#6b7280; font-size:14px; }
.ht123-grade-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.ht123-grade-card { border:1px solid #e5e7eb; border-radius:10px; padding:15px; background:#fff; }
.ht123-grade-card h3 { margin:0 0 10px; font-size:19px; }
.ht123-grade-card h3 a,.ht123-section-heading h2 a { text-decoration:none; }
.ht123-child-cats { list-style:none; margin:0; padding:0; }
.ht123-child-cats li { display:flex; justify-content:space-between; gap:8px; padding:7px 0; border-top:1px solid #f1f3f5; }
.ht123-child-cats li:first-child { border-top:0; }
.ht123-child-cats a { text-decoration:none; line-height:1.35; }
.ht123-child-cats span { color:#9ca3af; font-size:12px; white-space:nowrap; }
.ht123-resource-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.ht123-resource-link { display:flex; justify-content:space-between; gap:10px; border:1px solid #e5e7eb; border-radius:9px; padding:13px; text-decoration:none; }
.ht123-resource-link span { color:#6b7280; white-space:nowrap; }
.ht123-section-stack { display:grid; gap:24px; }
.ht123-category-section { border:1px solid #e5e7eb; border-radius:12px; padding:16px; }
.ht123-post-grid { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:22px; row-gap:0; }
.ht123-post-link { margin:0; padding:9px 0; border-bottom:1px solid #eef0f2; min-width:0; }
.ht123-post-link a { display:block; text-decoration:none; line-height:1.45; overflow-wrap:anywhere; }
.ht123-list-wrap[data-collapsed="1"] .ht123-extra-item { display:none; }
.ht123-list-wrap[data-collapsed="0"] .ht123-extra-item { display:list-item; }
.ht123-show-all { margin:16px auto 0; display:block; min-width:180px; padding:10px 18px; border:1px solid #d5d9de; border-radius:8px; background:#fff; cursor:pointer; font-weight:600; }
.ht123-hide-label { display:none; }
.ht123-list-wrap[data-collapsed="0"] .ht123-show-label { display:none; }
.ht123-list-wrap[data-collapsed="0"] .ht123-hide-label { display:inline; }
.ht123-empty { color:#6b7280; font-style:italic; }
.ht123-archive-header { margin-bottom:20px; }
.ht123-archive-header .breadcrumbs { margin-bottom:10px; font-size:13px; }
@media (max-width: 900px) {
  .ht123-grade-grid,.ht123-resource-grid,.ht123-post-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 600px) {
  .ht123-home,.ht123-archive-page { padding:12px; }
  .ht123-grade-grid,.ht123-resource-grid,.ht123-post-grid { grid-template-columns:1fr; }
  .ht123-hero { padding:16px; }
  .ht123-hero h1,.ht123-archive-header h1 { font-size:23px; }
  .ht123-home-title h2,.ht123-section-heading h2 { font-size:19px; }
  .ht123-category-section { padding:13px; }
}


/* =========================================================
   HỌC TOÁN 123 - 404 / 410 PAGE
   ========================================================= */
.ht123-error-page {
    background: #fff;
    padding: 42px 34px;
    text-align: center;
    box-sizing: border-box;
}
.ht123-error-code {
    font-size: 76px;
    line-height: 1;
    font-weight: 700;
    color: #2b5f91;
    margin-bottom: 12px;
}
.ht123-error-page h1 {
    margin: 0 0 14px;
    font-size: 30px;
    line-height: 1.3;
}
.ht123-error-message,
.ht123-error-note {
    max-width: 720px;
    margin: 0 auto 14px;
    color: #555;
    font-size: 16px;
    line-height: 1.7;
}
.ht123-error-search {
    max-width: 560px;
    margin: 24px auto 16px;
}
.ht123-error-search .search-form {
    display: flex;
    gap: 8px;
}
.ht123-error-search .search-form label {
    flex: 1;
}
.ht123-error-search .search-field {
    width: 100%;
    min-height: 42px;
    padding: 8px 10px;
    box-sizing: border-box;
}
.ht123-error-search .search-submit,
.ht123-error-home {
    min-height: 42px;
    padding: 10px 18px;
    border: 0;
    border-radius: 5px;
    background: #2b5f91;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
}
.ht123-error-actions {
    margin: 18px 0 30px;
}
.ht123-error-home {
    display: inline-block;
}
.ht123-error-grades {
    max-width: 760px;
    margin: 34px auto 0;
    padding-top: 24px;
    border-top: 1px solid #e5e7eb;
}
.ht123-error-grades h2 {
    margin: 0 0 15px;
    font-size: 20px;
}
.ht123-error-grade-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}
.ht123-error-grade-grid a {
    display: block;
    padding: 10px 8px;
    border: 1px solid #dfe4e8;
    border-radius: 6px;
    background: #f8f9fa;
    text-decoration: none;
}
@media (max-width: 700px) {
    .ht123-error-page { padding: 28px 16px; }
    .ht123-error-code { font-size: 58px; }
    .ht123-error-page h1 { font-size: 24px; }
    .ht123-error-search .search-form { display: block; }
    .ht123-error-search .search-submit { width: 100%; margin-top: 8px; }
    .ht123-error-grade-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =========================================================
   HỌC TOÁN 123 - GRADE HUB UI v2.2.0
   Toán lớp 1 -> 12: category cards + anchored sections
   ========================================================= */
.ht123-archive-page,
.ht123-archive-page button,
.ht123-archive-page input {
    font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
}
body.category .ht123-grade-hub-page {
    background:#f5f7fb;
    padding:20px;
}
.ht123-grade-hero {
    position:relative;
    overflow:hidden;
    padding:24px 26px;
    border:1px solid #e3e9f2;
    border-top:4px solid #3478f6;
    border-radius:16px;
    background:linear-gradient(135deg,#fff 0%,#fff 72%,#eef5ff 100%);
    box-shadow:0 8px 26px rgba(15,35,65,.05);
}
.ht123-grade-hero:after {
    content:"";
    position:absolute;
    width:150px;
    height:150px;
    right:-48px;
    top:-72px;
    border-radius:50%;
    background:rgba(52,120,246,.06);
    pointer-events:none;
}
.ht123-grade-kicker,
.ht123-section-kicker {
    display:block;
    margin:0 0 5px;
    color:#3478f6;
    font-size:11px;
    line-height:1.3;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
}
.ht123-grade-hero h1 {
    margin:0 0 8px;
    color:#102a4c;
    font-size:32px;
    letter-spacing:-.02em;
}
.ht123-grade-hero .ht123-archive-description {
    max-width:900px;
    margin:0;
    color:#56657a;
    font-size:15px;
    line-height:1.7;
}
.ht123-grade-hero .ht123-archive-description p:last-child { margin-bottom:0; }
.ht123-grade-summary {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
    margin-top:14px;
    color:#718096;
    font-size:12px;
    font-weight:600;
}
.ht123-grade-summary-dot {
    width:4px;
    height:4px;
    border-radius:50%;
    background:#a6b1c0;
}
.ht123-grade-category-nav {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:16px;
    margin:24px 0 28px;
}
.ht123-grade-category-card {
    --accent:#3478f6;
    position:relative;
    min-width:0;
    overflow:hidden;
    border:1px solid #dfe6ef;
    border-top:4px solid var(--accent);
    border-radius:15px;
    background:#fff;
    box-shadow:0 6px 20px rgba(15,35,65,.04);
    transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.ht123-grade-category-card:hover {
    transform:translateY(-2px);
    box-shadow:0 12px 28px rgba(15,35,65,.09);
    border-color:#cfd9e7;
}
.ht123-card-jump {
    display:block;
    min-height:156px;
    padding:20px 20px 15px;
    color:inherit;
    text-decoration:none !important;
}
.ht123-card-icon {
    display:flex;
    align-items:center;
    justify-content:center;
    width:38px;
    height:38px;
    margin-bottom:13px;
    border-radius:10px;
    background:color-mix(in srgb,var(--accent) 11%,white);
    font-size:20px;
    line-height:1;
}
.ht123-card-title {
    display:block;
    margin-bottom:7px;
    color:#10213b;
    font-size:18px;
    line-height:1.35;
    font-weight:800;
}
.ht123-card-desc {
    display:-webkit-box;
    overflow:hidden;
    color:#68778b;
    font-size:13px;
    line-height:1.55;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;
}
.ht123-card-meta {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:11px 16px;
    border-top:1px solid #edf1f5;
    background:#fbfcfe;
    color:#8591a3;
    font-size:11px;
    font-weight:700;
}
.ht123-card-meta a {
    color:var(--accent);
    text-decoration:none;
    white-space:nowrap;
}
.ht123-grade-sections {
    display:grid;
    gap:18px;
}
.ht123-grade-section {
    --accent:#3478f6;
    position:relative;
    scroll-margin-top:24px;
    padding:20px;
    border:1px solid #dfe6ef;
    border-left:4px solid var(--accent);
    border-radius:15px;
    background:#fff;
    box-shadow:0 5px 18px rgba(15,35,65,.035);
}
.ht123-grade-section-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    margin-bottom:5px;
}
.ht123-grade-section-title {
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0;
}
.ht123-section-icon {
    display:flex;
    flex:0 0 40px;
    align-items:center;
    justify-content:center;
    width:40px;
    height:40px;
    border-radius:11px;
    background:color-mix(in srgb,var(--accent) 11%,white);
    font-size:20px;
    line-height:1;
}
.ht123-grade-section-title h2 {
    margin:0;
    color:#10213b;
    font-size:21px;
    line-height:1.3;
}
.ht123-grade-section-title h2 a {
    color:inherit;
    text-decoration:none;
}
.ht123-grade-section-title h2 a:hover { color:var(--accent); }
.ht123-grade-section .ht123-section-kicker { color:var(--accent); }
.ht123-section-open {
    flex:0 0 auto;
    padding:8px 11px;
    border-radius:8px;
    background:#102a4c;
    color:#fff !important;
    font-size:11px;
    line-height:1.2;
    font-weight:800;
    text-decoration:none !important;
    white-space:nowrap;
}
.ht123-section-open:hover { opacity:.9; }
.ht123-grade-section-desc {
    margin:6px 0 14px;
    color:#6b788b;
    font-size:13px;
    line-height:1.6;
}
.ht123-grade-section .ht123-post-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px 12px;
}
.ht123-grade-section .ht123-post-link {
    padding:0;
    border:0;
}
.ht123-grade-section .ht123-post-link a,
.ht123-theory-p2 .ht123-post-link a,
.ht123-category-section .ht123-post-link a {
    display:flex;
    align-items:center;
    gap:9px;
    min-height:42px;
    box-sizing:border-box;
    padding:9px 10px;
    border:1px solid #e7ecf2;
    border-radius:8px;
    background:#fff;
    color:#263a57;
    font-size:13px;
    font-weight:600;
    line-height:1.4;
    text-decoration:none;
    transition:border-color .15s ease,background .15s ease,transform .15s ease;
}
.ht123-grade-section .ht123-post-link a:hover,
.ht123-theory-p2 .ht123-post-link a:hover,
.ht123-category-section .ht123-post-link a:hover {
    border-color:#cbd7e6;
    background:#f9fbfe;
    transform:translateY(-1px);
}
.ht123-post-dot {
    flex:0 0 7px;
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--accent,#3478f6);
    opacity:.75;
}
.ht123-post-title {
    min-width:0;
    flex:1 1 auto;
}
.ht123-post-arrow {
    flex:0 0 auto;
    color:#a6b0bd;
    font-size:18px;
    line-height:1;
}
.ht123-grade-section .ht123-show-all {
    margin-top:14px;
    border-color:#d8e0e9;
    border-radius:999px;
    color:#31445f;
    font-size:12px;
}
.ht123-subcategory-preview {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px 12px;
}
.ht123-subcategory-preview a {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:10px 12px;
    border:1px solid #e7ecf2;
    border-radius:8px;
    color:#263a57;
    font-size:13px;
    font-weight:700;
    text-decoration:none;
}
.ht123-subcategory-preview a:hover {
    border-color:#cbd7e6;
    background:#f9fbfe;
}
.ht123-grade-category-card.accent-blue,.ht123-grade-section.accent-blue{--accent:#3478f6}
.ht123-grade-category-card.accent-teal,.ht123-grade-section.accent-teal{--accent:#14b8a6}
.ht123-grade-category-card.accent-purple,.ht123-grade-section.accent-purple{--accent:#8b5cf6}
.ht123-grade-category-card.accent-red,.ht123-grade-section.accent-red{--accent:#ef4444}
.ht123-grade-category-card.accent-cyan,.ht123-grade-section.accent-cyan{--accent:#0ea5e9}
.ht123-grade-category-card.accent-orange,.ht123-grade-section.accent-orange{--accent:#f59e0b}
.ht123-grade-category-card.accent-green,.ht123-grade-section.accent-green{--accent:#10b981}
.ht123-grade-category-card.accent-indigo,.ht123-grade-section.accent-indigo{--accent:#6366f1}
.ht123-grade-category-card.accent-slate,.ht123-grade-section.accent-slate{--accent:#64748b}

/* Archive con: giữ dạng danh sách hiện tại nhưng gọn và có icon mũi tên. */
body.category .ht123-archive-page:not(.ht123-grade-hub-page) .ht123-category-section {
    border-radius:14px;
}
body.category .ht123-archive-page:not(.ht123-grade-hub-page) .ht123-section-heading h2 {
    color:#10213b;
    font-weight:800;
}
body.category .ht123-archive-page:not(.ht123-grade-hub-page) .ht123-post-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px 12px;
}
body.category .ht123-archive-page:not(.ht123-grade-hub-page) .ht123-post-link {
    padding:0;
    border:0;
}

@media (max-width: 1050px) {
    .ht123-grade-category-nav { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width: 820px) {
    body.category .ht123-grade-hub-page { padding:14px; }
    .ht123-grade-category-nav { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
    .ht123-grade-section .ht123-post-grid,
    .ht123-subcategory-preview,
    body.category .ht123-archive-page:not(.ht123-grade-hub-page) .ht123-post-grid { grid-template-columns:1fr; }
}
@media (max-width: 560px) {
    body.category .ht123-grade-hub-page { padding:10px; }
    .ht123-grade-hero { padding:18px 16px; border-radius:13px; }
    .ht123-grade-hero h1 { font-size:26px; }
    .ht123-grade-category-nav { grid-template-columns:1fr; }
    .ht123-card-jump { min-height:0; padding:16px 16px 13px; }
    .ht123-grade-section { padding:15px; border-left-width:3px; }
    .ht123-grade-section-head { align-items:flex-start; }
    .ht123-grade-section-title { align-items:flex-start; }
    .ht123-section-icon { flex-basis:36px; width:36px; height:36px; }
    .ht123-grade-section-title h2 { font-size:18px; }
    .ht123-section-open { padding:7px 9px; font-size:10px; }
    .ht123-grade-summary { display:none; }
}

/* Tiêu đề archive con có icon nhận diện nhẹ. */
.ht123-archive-title-row {
    display:flex;
    align-items:center;
    gap:11px;
    margin-bottom:8px;
}
.ht123-archive-title-row h1 { margin:0; }
.ht123-archive-title-icon {
    display:flex;
    flex:0 0 38px;
    align-items:center;
    justify-content:center;
    width:38px;
    height:38px;
    border-radius:10px;
    background:#eef5ff;
    font-size:20px;
    line-height:1;
}
.ht123-theory-p2 .ht123-section-heading h2:before {
    content:"📘";
    margin-right:8px;
    font-size:.9em;
}
@media (max-width:560px) {
    .ht123-archive-title-icon { flex-basis:34px; width:34px; height:34px; font-size:18px; }
}

/* =========================================================
   HT123 v2.2.1 - polish sau QA thực tế trên Grade Hub
   ========================================================= */
body.category {
    background:#f3f6fa !important;
    background-image:none !important;
    color:#20324b;
}
body.category #container {
    width:min(100%, 1280px);
    max-width:1280px;
    margin:0 auto;
    background:#fff;
    box-shadow:0 0 0 1px rgba(20,42,74,.05),0 14px 40px rgba(15,35,65,.08);
}
body.category #top-bar {
    box-sizing:border-box;
    padding:15px 26px 11px;
    background:#fff;
}
body.category #site-title,
body.category #site-title a {
    margin:0;
    color:#10213b;
    font-family:Inter,"Segoe UI",Roboto,Arial,sans-serif;
    font-size:34px;
    line-height:1.08;
    font-weight:800;
    letter-spacing:-.025em;
    text-shadow:none;
    text-decoration:none;
}
body.category #site-description {
    margin:4px 0 0;
    color:#66758a;
    font-family:Inter,"Segoe UI",Roboto,Arial,sans-serif;
    font-size:13px;
    line-height:1.4;
    font-weight:500;
}
body.category #nav-main {
    border:0;
    background:#155f92;
    box-shadow:none;
}
body.category #nav-main .nav-main a {
    padding:10px 9px;
    font-family:Inter,"Segoe UI",Roboto,Arial,sans-serif;
    font-size:13px;
    line-height:1.25;
    font-weight:650;
    text-shadow:none;
}
body.category #main {
    box-sizing:border-box;
    max-width:1240px;
    padding:12px 20px 38px;
}
body.category .ht123-grade-hub-page {
    padding:18px 0 4px;
}
body.category .ht123-grade-hero {
    padding:26px 28px;
}
body.category .ht123-grade-hero h1 {
    font-size:34px;
}
body.category .ht123-grade-category-nav {
    gap:18px;
    margin-top:22px;
}
body.category .ht123-grade-category-card {
    border-radius:16px;
}
body.category .ht123-card-jump {
    min-height:164px;
    padding:20px 20px 16px;
}
body.category .ht123-card-title {
    font-size:19px;
    line-height:1.35;
}
body.category .ht123-card-desc {
    font-size:13.5px;
    line-height:1.58;
}
body.category .ht123-card-meta {
    min-height:38px;
    box-sizing:border-box;
    font-size:11.5px;
}
body.category .ht123-grade-section {
    padding:22px;
    border-radius:16px;
}
body.category .ht123-grade-section-title h2 {
    font-size:22px;
}
body.category .ht123-grade-section-desc {
    font-size:13.5px;
}
body.category .ht123-grade-section .ht123-post-link a,
body.category .ht123-theory-p2 .ht123-post-link a,
body.category .ht123-category-section .ht123-post-link a,
body.category .ht123-subcategory-preview a {
    min-height:44px;
    padding:10px 12px;
    font-size:13.5px;
}
body.category #bottom-bar {
    box-sizing:border-box;
    padding:18px 24px;
    border:0;
    background:#0f172a;
    color:#d8e0ec;
    font-family:Inter,"Segoe UI",Roboto,Arial,sans-serif;
    font-size:12px;
}
body.category #bottom-bar a { color:#fff; }

/* Nhãn số lượng ở card có thể là “10 chủ đề”, “41 bài”… */
.ht123-card-meta > span:first-child {
    color:#6d7b8f;
    font-variant-numeric:tabular-nums;
}

@media (max-width: 1050px) {
    body.category #main { padding-left:16px; padding-right:16px; }
    body.category #site-title, body.category #site-title a { font-size:30px; }
}
@media (max-width: 700px) {
    body.category #top-bar { padding:12px 14px 9px; }
    body.category #main { padding:8px 10px 28px; }
    body.category .ht123-grade-hub-page { padding-top:10px; }
    body.category .ht123-grade-hero { padding:20px 18px; }
    body.category .ht123-grade-hero h1 { font-size:27px; }
    body.category .ht123-card-title { font-size:17px; }
    body.category .ht123-grade-section { padding:16px; }
    body.category .ht123-grade-section-title h2 { font-size:19px; }
}