/* ===== Trang danh mục (Figma 1:1618) ===== */
.tq-cat { padding-bottom: 8px }
.tq-cat__crumb { display: flex; align-items: center; gap: 8px; font: 400 16px/22px var(--tq-font); color: #A6A6A6 }
.tq-cat__crumb a { color: #A6A6A6; text-decoration: none }
.tq-cat__crumb a:hover { color: var(--tq-text) }
.tq-cat__home { display: inline-flex; align-items: center; gap: 8px }
.tq-cat__cur { color: var(--tq-text) }
.tq-cat__banners { margin-bottom: 20px }
.tq-cat__brands { display: flex; align-items: center; gap: 34px }
.tq-cat__brands-row { display: flex; flex: 1; gap: 16px; min-width: 0; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth }
.tq-cat__brands-row::-webkit-scrollbar { display: none }
.tq-brandtile { display: flex; flex: 0 0 85px; align-items: center; justify-content: center; width: 85px; height: 80px; padding: 5px; border: .8px solid #D0D0D0; border-radius: 10px; background: #fff; color: var(--tq-text); font: 500 13px/16px var(--tq-font); text-align: center; text-decoration: none; transition: border-color .2s }
.tq-brandtile:hover { border-color: var(--color-primary); color: var(--tq-text) }
.tq-brandtile img { width: 75px; height: 70px; border-radius: 10px; object-fit: contain }
.tq-cat__brands-next { flex: 0 0 49px; width: 49px; height: 46px; padding: 0; border: 0; background: url(../images/category/brand-next.svg) 0 0 / 100% 100% no-repeat; cursor: pointer }
.tq-cat__brands-next[hidden] { display: none }
.tq-cat__chips { display: flex; flex-wrap: wrap; gap: 10px 8px }
.tq-chip { display: inline-flex; align-items: center; padding: 10px 20px; border: .6px solid #DDD; border-radius: 100px; background: #fff; color: #000; font: 500 14px/18px var(--tq-font); white-space: nowrap; text-decoration: none; transition: background .2s, border-color .2s }
.tq-chip:hover { background: var(--color-primary); border-color: var(--color-primary); color: #000 }
.tq-chip.is-active { background: var(--color-primary); border-color: var(--color-primary) }
/* Mobile/tablet (Figma 83:3376): chip "Sự cố" luôn 1 hàng, vuốt ngang, ẩn thanh cuộn; chip 10px/12px, padding 10x20, gap 6 */
@media (max-width: 991.98px) {
    .tq-cat__chips { flex-wrap: nowrap; gap: 6px; margin-right: -15px; padding-right: 15px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch }
    .tq-cat__chips::-webkit-scrollbar { display: none }
    .tq-cat__chips .tq-chip { flex: 0 0 auto }
}
@media (max-width: 575.98px) {
    .tq-cat__chips .tq-chip { padding: 10px 20px; font: 500 10px/12px var(--tq-font) }
}
.tq-cat__grid { row-gap: 30px }
.tq-cat__empty { margin: 0; color: var(--tq-muted); font: 500 16px/22px var(--tq-font) }
.tq-cat__prev { margin-top: 16px; text-align: center; font: 500 14px/18px var(--tq-font) }
.tq-cat__seo { position: relative }
.tq-cat__seo-body { max-height: 132px; overflow: hidden; color: var(--tq-muted); font: 500 16px/22px var(--tq-font); text-align: justify }
.tq-cat__seo-body img { max-width: 100%; height: auto }
/* Overlay + nút theo Figma 1:1726: lớp phủ cao 44px (trắng đặc ở 22px dưới, mờ dần lên trên), nút 46px đè lên 41px cuối đoạn chữ */
.tq-cat__seo-fade { position: absolute; left: 0; right: 0; bottom: 6px; height: 44px; z-index: 1; background: linear-gradient(to top, #fff 50%, rgba(255, 255, 255, 0) 114.98%); pointer-events: none }
.tq-cat__seo-btn { display: flex; margin: -41px auto 0; position: relative; z-index: 2 }
.tq-cat__seo.is-open .tq-cat__seo-body { max-height: none }
.tq-cat__seo.is-open .tq-cat__seo-fade { display: none }
.tq-cat__seo.is-open .tq-cat__seo-btn { margin: 16px auto 0 }
.tq-cat__seo.is-short .tq-cat__seo-fade, .tq-cat__seo.is-short .tq-cat__seo-btn { display: none }
.tq-review { padding-bottom: 6px }
.tq-review .swiper-slide { height: auto }
.tq-review__card { position: relative; text-align: left; height: 164px; padding: 14px 14px 0 85px; border-radius: 8px; background: #F3F3F3 }
.tq-review__avatar { position: absolute; left: 14px; top: 14px; width: 50px; height: 50px; border-radius: 50%; object-fit: cover }
.tq-review__name { display: block; margin: 0 0 10px; color: #000; font: 500 16px/normal var(--tq-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.tq-review__stars { display: block; width: 105px; height: 18px; background: url(../images/category/star.svg) 0 0 / 21px 18px repeat-x }
.tq-review__text { position: absolute; left: 14px; right: 14px; top: 84px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin: 0; color: #5C5C5C; font: 500 16px/22px var(--tq-font) }
.tq-review__dots { margin-top: 20px }
.tq-review__dots .swiper-pagination-bullet { width: 6px; height: 6px; background: #D9D9D9 }
.tq-review__dots .swiper-pagination-bullet-active { background: var(--color-primary) }
@media (max-width: 991.98px) { .tq-cat__brands { gap: 12px } .tq-cat__brands-next { display: none } .tq-cat__seo-body { max-height: 110px } }

/* ===== Tin công nghệ: danh sách + chi tiết (tự thiết kế) ===== */
.tq-blog__chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none }
.tq-blog__chips::-webkit-scrollbar { display: none }
.tq-blog__head { margin-bottom: 20px; text-align: center }
.tq-blog__title { margin: 0 0 8px; color: #000; font: 700 28px/36px var(--tq-font) }
.tq-blog__meta { margin: 0; color: #A6A6A6; font: 400 14px/18px var(--tq-font) }
.tq-blog__layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 32px; align-items: start }
.tq-blog__aside { position: sticky; top: 120px }
.tq-blog__toc .wrap-toc { margin: 0; padding: 16px; border: 1px solid #D2D2D2; border-radius: 10px; background: #fff }
.tq-blog__toc .toc-head { color: var(--tq-text) !important; font: 700 18px/24px var(--tq-font) }
.tq-blog__toc .toc-list { margin-top: 12px; max-height: calc(100vh - 220px); padding: 0 }
.tq-blog__toc .toc-list li a { padding: 6px 0; color: var(--tq-text) !important; font: 500 14px/20px var(--tq-font) }
.tq-blog__toc .toc-list li a:hover, .tq-blog__toc .toc-list li a.active { color: #EC0000 !important }
.tq-blog__toc .toc-list > li > a::before { content: none }
.tq-blog__body { color: var(--tq-text); font: 400 16px/26px var(--tq-font) }
.tq-blog__body img { max-width: 100%; height: auto; border-radius: 10px }
.tq-blog__body h2, .tq-blog__body h3 { margin: 24px 0 12px; color: #000; font-weight: 700 }
.tq-blog__rel .swiper-slide { width: 288px; height: auto }
@media (max-width: 991.98px) { .tq-blog__layout { grid-template-columns: minmax(0, 1fr); gap: 16px } .tq-blog__aside { position: static } .tq-blog__title { font-size: 22px; line-height: 30px } }
@media (max-width: 575.98px) { .tq-blog__rel .swiper-slide { width: 240px } }
.tq-cat .tq-news__grid .tq-post, .tq-blog__rel .tq-post { height: 100% }
.tq-blog__rel .tq-post { margin-bottom: 0 }
.tq-cat .tq-news__grid .tq-post__body, .tq-blog__rel .tq-post__body { padding-bottom: 12px }
.tq-review__card { transition: transform .25s, box-shadow .25s, background .25s }
.tq-review__name { transition: color .25s }
.tq-review__card:hover { transform: translateY(-4px); background: #FFF9CE; box-shadow: 0 6px 16px rgba(0, 0, 0, .1) }
.tq-review__card:hover .tq-review__name { color: #FC9F10 }
.tq-review { padding-top: 6px }

/* Breadcrumb: dài quá thì cả mục xuống dòng (không bẻ chữ trong từng mục) */
.tq-cat__crumb { flex-wrap: wrap; gap: 4px 8px }
.tq-cat__crumb > * { white-space: nowrap }
.tq-cat__crumb > .tq-cat__cur { white-space: normal; min-width: 0 }