*{box-sizing:border-box;margin:0;padding:0}.post-body,.ck-content{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;font-size:1rem;line-height:1.65;color:#222;max-width:720px;margin:0 auto;padding:0}body{background:#f8f9fa;color:#343a40}.content{display:grid;grid-template-columns:2fr 1fr;gap:10px;padding:0 20px;max-width:1200px;margin:0 auto}.navbar-content,.search-container{max-width:1200px;margin:0 auto;padding:0 20px}.news-container{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.news-article,.post-container{display:flex;flex-direction:column;background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 4px 10px rgba(0,0,0,.08);transition:transform .25s,box-shadow .25s}.news-article:hover,.post-container:hover{transform:translateY(-4px);box-shadow:0 6px 16px rgba(0,0,0,.12)}.news-article a{color:inherit;display:flex;flex-direction:column;height:100%;text-decoration:none}.news-article img{width:100%;height:180px;object-fit:cover;background:#e9ecef;flex-shrink:0}.news-article h2{font-size:1rem;font-weight:600;margin:12px 14px 0;line-height:1.5;flex-grow:1;color:#222}.search-form{display:flex;align-items:center;gap:8px;margin:10px 0}.search-form input{flex:1;padding:8px 12px;font-size:1rem;border:1px solid #ccc;border-radius:5px}.search-form button,.demo-button,.buy-button,.download-link-button{padding:8px 15px;font-size:1rem;border:none;border-radius:5px;color:#fff;cursor:pointer;transition:background-color .3s,transform .15s}.search-form button{background:#343a40}.search-form button:hover{background:#0056b3}.demo-button{background:#007bff;width:49.5%}.buy-button{background:#28a745;width:49.5%}.buy-button.download-now{background:#c0900f}.download-link-button{background:#0056b3;display:block;margin:5px 0}.demo-button:hover,.buy-button:hover,.download-link-button:hover{background:#004494;transform:translateY(-2px)}.link-container{display:flex;flex-wrap:wrap;gap:10px}.link-container .download-link-button{flex:1 1 calc(33.333% - 10px);text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.separator{border-bottom:1px solid #ccc;margin:15px 0 10px 0}.separator::before,.separator::after{content:none!important}.separator h2{margin:0;padding:0 0px;background:#fff;font-size:1.5em;color:#343a40;white-space:nowrap}.post-body{max-width:800px;margin:0 auto}.post-body h3,.ck-content h3{font-size:1.5rem;font-weight:600;padding-left:2px}.post-body h3{margin:1rem 0 1rem;padding-bottom:4px;display:inline-block;position:relative}.post-body h3::before{content:"";position:absolute;left:0;top:0;width:1px;height:0;background-color:#ddd;animation:borderLeftGrow 7s ease infinite}.post-body h3::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background-color:#ddd;animation:borderBottomGrow 7s ease infinite}@keyframes borderLeftGrow{0%{height:0}28.5%{height:100%}42.8%{height:100%}100%{height:100%}}@keyframes borderBottomGrow{0%{width:0}28.5%{width:0}42.8%{width:100%}100%{width:100%}}.post-body h4,.ck-content h4{font-size:1.2rem;font-weight:600;margin:1.5rem 0 .75rem;color:#444}.post-body p,.ck-content p{margin-bottom:1.25rem}.post-body ul,.ck-content ul{list-style:none;padding-left:0}.post-body ul{margin-left:0}.post-body li{margin-bottom:.75rem;padding-left:28px;position:relative}.post-body li::before{position:absolute;left:0;color:#007bff;font-weight:bold}.post-body blockquote,.ck-content blockquote{background:#f9f9fb;border-left:4px solid #0a84ff;padding:1rem 1.25rem;margin:1.5rem 0;font-style:italic;color:#555;border-radius:6px}.post-body img,.ck-content img{width:100%;height:auto;object-fit:cover;border-radius:6px;margin:1rem auto;display:block;cursor:pointer}.article-media .image-container{margin-bottom:20px;max-width:100%;overflow:hidden}.article-media .article-image{width:590px;height:300px;object-fit:cover;display:block;margin:0 auto}.pagination-container{grid-column:1/-1;margin-top:20px}.page-item.active .page-link{color:#fff;background:#343a40!important;border-color:#343a40!important}.footer{background:#333;color:#fff;text-align:center;padding:12px 0;font-size:15px}.navbar-nav .nav-link,.navbar-brand{color:#fff!important;font-weight:500;transition:background-color .3s,color .3s}.navbar-nav .nav-link:hover,.navbar-brand:hover{background:rgba(255,255,255,0.1);color:#fff!important}.navbar,.navbar-wrapper{background:#343a40}.navbar{padding-left:0!important;padding-right:0!important}.navbar-brand{padding-left:0!important;margin-left:0!important}.post-container{padding:10px;margin-bottom:10px}@media(min-width:769px){.post-container{padding:20px;margin-bottom:10px}}.news-article a:hover{text-decoration:none}.article-header{margin-bottom:20px;border-bottom:1px solid #e0e0e0}.article-header h1{font-size:2rem;font-weight:700;margin-bottom:10px;padding-bottom:5px;border-bottom:none}.article-description{margin-top:0;color:#555;font-size:1.1rem;line-height:1.5}.article-header .article-description{font-size:1rem;color:#555;line-height:1.5;margin-bottom:10px}.news-container.single-result{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}.news-container.single-result .news-article{height:auto;align-self:start}.lightbox{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.85);backdrop-filter:blur(5px);justify-content:center;align-items:center;z-index:1000;overflow:auto}.lightbox-content{background:#fff;border-radius:10px;padding:3px;box-shadow:0 8px 24px rgba(0,0,0,0.3);max-width:90%;max-height:90%;position:relative;opacity:0;transform:scale(0.8);transition:opacity .3s ease,transform .3s ease}.lightbox-image{max-width:100%;max-height:80vh;object-fit:contain;border-radius:6px}.lightbox-close{position:absolute;top:-15px;right:-15px;width:30px;height:30px;background:#fff;color:#333;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.5rem;cursor:pointer;transition:background .3s,transform .3s}.lightbox-close:hover{background:#ddd;transform:scale(1.1)}.table-responsive{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.post-body table,.ck-content table{border-collapse:collapse;margin:0 auto;font-size:.95rem;background:#fff;border:1px solid #ddd;table-layout:auto;width:100%;max-width:100%;border-radius:6px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,0.08)}.post-body th,.post-body td,.ck-content th,.ck-content td{border:1px solid #ddd;padding:8px 10px;text-align:left;vertical-align:top;white-space:normal;word-wrap:break-word}.post-body th,.ck-content th{background-color:#f8f9fa;font-weight:600;color:#333}.post-body tr:hover,.ck-content tr:hover{background-color:#f1f5ff;transition:background .2s ease}.table-responsive{scrollbar-width:thin;scrollbar-color:#ccc transparent}.table-responsive::-webkit-scrollbar{height:6px}.table-responsive::-webkit-scrollbar-track{background:transparent}.table-responsive::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,0.2);border-radius:3px}.table-responsive::-webkit-scrollbar-thumb:hover{background-color:rgba(0,0,0,0.35)}@media(max-width:768px){.content,.news-container{grid-template-columns:1fr}.content,.navbar-content,.search-container{padding:0 10px}.news-article img{height:200px}.demo-button,.buy-button,.download-link-button{width:100%}.demo-button:not(:last-child){margin-bottom:5px}.link-container{gap:0}.link-container .download-link-button{flex:1 1 100%;max-width:100%}.separator h2{font-size:1.2em}.article-media .article-image{width:100%;height:auto}.post-body img,.ck-content img{width:100%;height:auto}.article-media .image-container{margin-bottom:15px}.article-header h1{font-size:1.6rem}.article-header .article-description{font-size:.95rem}.navbar-content{padding:0 10px}.navbar-brand,.navbar-toggler{padding-left:0!important}.lightbox-content{padding:15px}.lightbox-close{top:-10px;right:-10px;width:25px;height:25px;font-size:1.2rem}.post-body table,.ck-content table{width:auto;min-width:600px}.post-body th,.post-body td,.ck-content th,.ck-content td{white-space:nowrap}}.post-body ul li,.ck-content ul li{margin-bottom:0.3rem;line-height:1.5}.post-body table td,.post-body table th,.ck-content table td,.ck-content table th{line-height:1.5;padding:6px 8px}.article-meta{font-size:.75rem;color:#777;margin:5px 14px 10px}.article-date-separator{display:flex;align-items:center;margin:8px 0 12px;color:#777;font-size:.75rem}.article-date-separator .date-text{white-space:nowrap;padding-right:0}.article-date-separator::after{content:"";flex:1;border-bottom:1px solid #ccc;margin-left:10px}

#toc {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  margin: 15px 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  font-size: 0.95rem;
}

#toc .toc-toggle {
  padding: 10px 12px;
  cursor: pointer;
  font-weight: 600;
  color: #333;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#toc .toc-toggle::after {
  content: "▼";
  font-size: 0.8rem;
  margin-left: 6px;
  transition: transform 0.2s;
}

#toc .toc-toggle.active::after {
  transform: rotate(-180deg);
}

#toc ul {
  list-style: none;
  padding: 10px 15px;
  margin: 0;
  border-top: 1px solid #eee;
}

#toc li {
  margin: 6px 0;
  line-height: 1.4;
}

#toc a {
  color: #007bff;
  text-decoration: none;
  transition: color 0.2s;
}

#toc a:hover {
  color: #0056b3;
  text-decoration: none;
}

#toc li.toc-h3 {
  margin-left: 15px;
  font-size: 0.9rem;
}
#toc li.toc-h4 {
  margin-left: 30px;
  font-size: 0.85rem;
}


.news-container .news-article {
  height: auto;
  align-self: start;
}

.article-tags {
  margin: 30px 0 20px;
}

.article-tags .separator h2 {
  /* Đã có sẵn trong CSS gốc, không cần override */
  font-size: 1.5em;
  color: #343a40;
}

.tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0 0px; /* căn lề nhẹ giống nội dung bài */
}

.tag-button {
  display: inline-block;
  padding: 3px 6px;              /* nhỏ gọn hơn, giống button download */
  background-color: #f8f9fa;      /* nhẹ nhàng, giống th của table và card */
  color: #343a40;                 /* màu chữ chính của site */
  border: 1px solid #ddd;         /* viền nhẹ như card */
  border-radius: 6px;             /* bo góc giống card và hình ảnh */
  font-size: 0.95rem;             /* đồng bộ với font bài viết và TOC */
  text-decoration: none;
  transition: all 0.25s ease;
}

.tag-button:hover {
  background-color: #007bff;      /* màu xanh chủ đạo */
  color: #fff;
  border-color: #007bff;
  transform: translateY(-2px);    /* hiệu ứng nâng nhẹ giống card hover */
  box-shadow: 0 4px 8px rgba(0, 123, 255, 0.15);
}