.page-title-inner nav.woocommerce-breadcrumb.breadcrumbs.uppercase {
    font-size: 21px;
}

/* =========================================================
   FILTER BAR
========================================================= */
.tx-filter-wrapper {
    width: 100%;
}

.tx-filter-bar {
    width: 100%;
    min-height: 72px;
    padding: 15px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background: #fff;
    border: 1px solid #ebebeb;
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
    box-sizing: border-box;
    margin-bottom: 32px;
}

/* =========================================================
   LEFT
========================================================= */
.tx-filter-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* =========================================================
   OPEN BUTTON
========================================================= */
.tx-filter-open {
    height: 40px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    border-radius: 9px;
    background: #f1f5f9;
    color: #374151;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all .2s ease;
    margin-bottom: 0;
    margin-right: 0;
}

.tx-filter-open:hover {
    background: #e2e8f0;
}

.tx-filter-open svg {
    width: 17px;
    height: 17px;
}

/* =========================================================
   RESET
========================================================= */
.tx-filter-reset {
    height: 40px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #e5e7eb;
    border-radius: 9px;
    background: #f8fafc;
    color: #374151;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    margin-bottom: 0;
}

/* =========================================================
   SORT
========================================================= */
.tx-filter-sort {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-shrink: 0;
}

.tx-filter-sort-label {
    color: #9ca3af;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    white-space: nowrap;
}

.tx-filter-sort-select {
    height: 40px;
    min-width: 175px;
    padding: 0 12px;
    border: 1px solid #dbe2ea;
    border-radius: 9px;
    background: #f8fafc;
    color: #374151;
    font-size: 13px;
    font-weight: 700;
    outline: none;
    cursor: pointer;
    margin-bottom: 0;
}

.tx-filter-sort-select:hover {
    background: #f1f5f9;
}

.tx-filter-sort-select:focus {
    border-color: #cbd5e1;
}

/* =========================================================
   MODAL
========================================================= */
.tx-filter-modal {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 20px;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 999999;
    box-sizing: border-box;
}

.tx-filter-modal.is-open {
    display: flex;
}

/* =========================================================
   BACKDROP
========================================================= */
.tx-filter-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .6);
}

/* =========================================================
   MODAL BOX
========================================================= */
.tx-filter-modal-box {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 900px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow:
        0 25px 50px -12px rgba(0, 0, 0, .25);
    animation: txFilterModalShow .2s ease;
}

@keyframes txFilterModalShow {
    from {
        opacity: 0;
        transform: scale(.96) translateY(10px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* =========================================================
   HEADER
========================================================= */
.tx-filter-modal-header {
    min-height: 64px;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    box-sizing: border-box;
}

.tx-filter-modal-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tx-filter-modal-title h3 {
    margin: 0;
    color: #0f172a;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -.02em;
}

.tx-filter-modal-title svg {
    color: #e31b23;
}

.tx-filter-modal-close {
    width: 34px;
    height: 34px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #9ca3af;
    cursor: pointer;
    margin: 0;
}

.tx-filter-modal-close:hover {
    background: #e2e8f0;
    color: #475569;
}

/* =========================================================
   CONTENT
========================================================= */
.tx-filter-modal-content {
    padding: 24px;
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 32px;
    overflow-y: auto;
    box-sizing: border-box;
}

.tx-filter-modal-content .widget {
    margin: 0;
}

/* Thứ tự cột: Khoảng giá → Tình trạng → Thương hiệu */
.tx-filter-modal-content > .tx-filter-group {
    order: 1;
}

.tx-filter-modal-content .widget_tx_stock_filter_widget {
    order: 2;
}

.tx-filter-modal-content .widget_tx_product_brand_filter_widget {
    order: 3;
}

/* =========================================================
   GROUP
========================================================= */
.tx-filter-group {
    min-width: 0;
}

.tx-filter-group-title {
    margin: 0 0 16px;
    padding-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #1e293b;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    border-bottom: 1px solid #f1f5f9;
}

.tx-filter-title-line {
    width: 6px;
    height: 16px;
    display: block;
    border-radius: 2px;
    flex-shrink: 0;
}

.tx-filter-title-line-main {
    background: #e31b23;
}

.tx-filter-title-line-teal {
    background: #14b8a6;
}

.tx-filter-title-line-orange {
    background: #f59e0b;
}

/* =========================================================
   OPTIONS
========================================================= */
.tx-filter-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tx-filter-option {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #374151;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    transition: color .2s ease;
    margin-bottom: 0;
}

.tx-filter-option:hover {
    color: #111827;
}

.tx-filter-option input {
    width: 16px;
    height: 16px;
    margin: 0;
    flex-shrink: 0;
    cursor: pointer;
}

/* =========================================================
   BRAND LIST
========================================================= */
.tx-filter-brand-list {
    max-height: 280px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-right: 6px;
    overflow-y: auto;
}

.tx-filter-brand-list::-webkit-scrollbar {
    width: 4px;
}

.tx-filter-brand-list::-webkit-scrollbar-track {
    background: #f1f5f9;
}

.tx-filter-brand-list::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}

.tx-filter-empty-brand {
    color: #9ca3af;
    font-size: 13px;
}

/* =========================================================
   FOOTER
========================================================= */
.tx-filter-modal-footer {
    min-height: 76px;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    box-sizing: border-box;
}

.tx-filter-footer-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* =========================================================
   BUTTONS
========================================================= */
.tx-filter-clear,
.tx-filter-close,
.tx-filter-apply {
    height: 42px;
    padding: 0 20px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all .2s ease;
    box-sizing: border-box;
    max-width: unset;
    /* min-height: unset; */
    line-height: unset;
    min-width: unset;
    letter-spacing: 0;
}

.tx-filter-clear {
    border: 1px solid #e2e8f0;
    background: #f1f5f9;
    color: #374151;
}

.tx-filter-clear:hover {
    background: #e2e8f0;
}

.tx-filter-close {
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #4b5563;
}

.tx-filter-close:hover {
    background: #f8fafc;
}

.tx-filter-apply {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 0;
    background: #e31b23;
    color: #fff;
    box-shadow: 0 6px 14px rgba(227, 27, 35, .25);
}

.tx-filter-apply:hover {
    background: #c8161d;
}

.tx-filter-apply.is-loading {
    opacity: .6;
    pointer-events: none;
}

/* =========================================================
   COUNT
========================================================= */
.tx-filter-count {
    min-width: 24px;
    height: 20px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    background: rgba(255, 255, 255, .2);
    font-size: 11px;
    font-weight: 700;
}

/* =========================================================
   PRODUCT LOADING
========================================================= */
.products.tx-filter-loading {
    opacity: .35;
    pointer-events: none;
    transition: opacity .2s ease;
}

/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 767px) {
    .tx-filter-bar {
        min-height: auto;
        padding: 12px;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .category-page-row {
        padding-top: 10px!important;
    }
    .tx-filter-left {
        width: 100%;
    }

    .tx-filter-open {
        width: 100%;
    }

    .tx-filter-sort {
        width: 100%;
        justify-content: space-between;
    }

    .tx-filter-sort-select {
        flex: 1;
        min-width: 0;
    }

    .tx-filter-modal {
        padding: 12px;
    }

    .tx-filter-modal-box {
        max-height: 94vh;
        border-radius: 14px;
    }

    .tx-filter-modal-content {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 20px;
    }

    .tx-filter-modal-header {
        padding: 0 16px;
    }

    .tx-filter-modal-title h3 {
        font-size: 15px;
    }

    .tx-filter-modal-footer {
        padding: 12px 16px;
        flex-direction: column;
        align-items: stretch;
    }

    .tx-filter-footer-right {
        width: 100%;
    }

    .tx-filter-clear,
    .tx-filter-close,
    .tx-filter-apply {
        flex: 1;
        margin: 0;
    }
}


/* filter bar */
.tx-active-filters-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px;
    margin: 16px 0;
}

.tx-active-filters-bar.tx-hidden {
    display: none !important;
}

.tx-active-filters-label {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #94a3b8;
    padding-left: 4px;
    margin-right: 4px;
}

.tx-chips-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tx-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
    font-size: 12px;
    font-weight: 700;
    color: #334155;
    padding: 6px 12px;
    border-radius: 8px;
}

.tx-chip-remove {
    display: inline-flex;
    color: #94a3b8;
    cursor: pointer;
    border-radius: 999px;
    padding: 2px;
    transition: color .15s;
}

.tx-chip-remove:hover {
    color: #dc2626;
}

.tx-clear-all {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 800;
    color: #dc2626;
    background: #fee2e2;
    border: 1px solid rgba(220, 38, 38, .1);
    padding: 6px 12px;
    border-radius: 8px;
    text-decoration: none;
    transition: all .15s;
}

.tx-clear-all:hover {
    background: #dc2626;
    color: #fff;
    border-color: transparent;
}









/*
|--------------------------------------------------------------------------
| Mô tả danh mục
|--------------------------------------------------------------------------
*/
:root {
    --tp-hud-blue: #1e6fd9;
    --tp-hud-blue-dark: #0f4fa8;
    --tp-hud-ink: #1a1a1a;
    --tp-hud-text: #3d4147;
    --tp-hud-muted: #6b7280;
    --tp-hud-border: #e4e8ee;
    --tp-hud-bg-soft: #f6f9fd;
    --tp-hud-red: #e0293f;
}

.tp-hud-scope,
.tp-hud-scope * {
    box-sizing: border-box;
}

.tp-hud-accordion {
    margin-top: 30px;
}

.tp-hud-scope {
    /* font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; */
    color: var(--tp-hud-text);
    line-height: 1.65;
    /* max-width: 900px; */
    /* margin: 0 auto; */
    /* padding: 24px 16px 60px; */
}

.tp-hud-scope a {
    color: inherit;
    text-decoration: none;
}

/* ============ PROMO BANNER ============ */
.tp-hud-promo {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--tp-hud-border);
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.tp-hud-promo__thumb {
    width: 70px;
    height: 70px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    background: #eee;
}

.tp-hud-promo__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.tp-hud-promo__body {
    flex: 1 1 260px;
    min-width: 220px;
}

.tp-hud-promo__title {
    font-size: 17px;
    font-weight: 700;
    color: var(--tp-hud-ink);
    margin: 0 0 6px;
}

.tp-hud-promo__desc {
    font-size: 13.5px;
    color: var(--tp-hud-muted);
    margin: 0;
}

.tp-hud-promo__badges {
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
    margin-left: auto;
}

.tp-hud-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 76px;
    text-align: center;
}

.tp-hud-badge__icon {
    width: 30px;
    height: 30px;
    color: var(--tp-hud-red);
}

.tp-hud-badge__icon svg {
    width: 100%;
    height: 100%;
}

.tp-hud-badge__label {
    font-size: 11px;
    line-height: 1.3;
    color: var(--tp-hud-text);
}

/* ============ ARTICLE CARD ============ */
.tp-hud-card {
    border: 1px solid var(--tp-hud-border);
    border-radius: 12px;
    padding: 15px 15px;
    margin-top: 25px;
    background: #1e6fd908;
    background: #f9fafe;
}

.tp-hud-lead {
    font-size: 15px;
    margin: 0 0 16px;
}

.tp-hud-lead a {
    color: var(--tp-hud-blue);
    font-weight: 600;
}

.tp-hud-body p {
    font-size: 14.5px;
    margin: 0 0 16px;
    color: var(--tp-hud-text);
}

/* ---- Hero image ---- */
.tp-hud-hero {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    margin: 20px 0 24px;
}

.tp-hud-hero img {
    width: 100%;
    display: block;
}

.tp-hud-hero__brand {
    position: absolute;
    top: 14px;
    right: 14px;
    background: #fff;
    border-radius: 999px;
    padding: 6px 12px 6px 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 800;
    color: var(--tp-hud-red);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
}

.tp-hud-hero__brand svg {
    width: 18px;
    height: 18px;
}















/* ---- Accordion sections ---- */
.tp-hud-section {
    border-top: 1px solid var(--tp-hud-border);
}

.tp-hud-section:last-child {
    border-bottom: 1px solid var(--tp-hud-border);
}

.tp-hud-section__head {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    background: none;
    border: none;
    padding: 18px 4px;
    cursor: pointer;
    text-align: left;
    font: inherit;
    margin-bottom: 0;
}

.tp-hud-section__icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: var(--tp-hud-bg-soft);
    color: var(--tp-hud-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tp-hud-section__icon svg {
    width: 18px;
    height: 18px;
}

.tp-hud-section__title {
    flex: 1;
    font-size: 16px;
    font-weight: 700;
    color: var(--tp-hud-ink);
}

.tp-hud-section__chevron {
    width: 18px;
    height: 18px;
    color: var(--solika-red) !important;
    transition: transform .2s;
    flex-shrink: 0;
}

.tp-hud-section[data-sk-open="true"] .tp-hud-section__chevron {
    transform: rotate(180deg);
}

.tp-hud-section__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .22s ease;
}

.tp-hud-section[data-sk-open="true"] .tp-hud-section__panel {
    grid-template-rows: 1fr;
}

.tp-hud-section__panel-inner {
    overflow: hidden;
}

.tp-hud-section__body {
    padding: 0 4px 20px 55px;
    font-size: 15px;
    color: var(--tp-hud-text);
    margin: 0;
}

@media (max-width: 640px) {


    .tp-hud-promo {
        flex-direction: column;
    }

    .tp-hud-promo__badges {
        margin-left: 0;
    }

    .tp-hud-section__body {
        padding-left: 4px;
    }
}


/* =========================================
   TX SERVICE HIGHLIGHT
   ========================================= */

.tx-service-highlight {
    width: 100%;
    padding: 0;
    box-sizing: border-box;
}

.tx-service-highlight *,
.tx-service-highlight *::before,
.tx-service-highlight *::after {
    box-sizing: border-box;
}

.tx-service-highlight__inner {
    width: 100%;
    min-height: 96px;

    display: flex;
    align-items: center;

    padding: 12px 18px;

    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 8px;

    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.04);
}


/* =========================================
   INTRO
   ========================================= */

.tx-service-highlight__intro {
    flex: 1 1 auto;

    min-width: 0;

    display: flex;
    align-items: center;

    padding-right: 25px;
}

.tx-service-highlight__image {
    /* width: 105px; */
    /* height: 100px; */
    flex: 0 0 110px;
    overflow: hidden;
    border-radius: 6px;
    background: #f5f5f5;
    aspect-ratio: 1 / 1;
}

.tx-service-highlight__image img {
    display: flex;

    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}


.tx-service-highlight__content {
    min-width: 0;
    padding-left: 14px;
}

.tx-service-highlight__title {
    margin: 0 0 6px;
    color: #222;
    font-size: 16px;
    line-height: 1.35;
    font-weight: 700;
}

.tx-service-highlight__desc {
    max-width: 390px;
    margin: 0;
    color: #777;
    font-size: 13px;
    line-height: 1.55;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    display: -webkit-box;
}


/* =========================================
   SERVICES
   ========================================= */

.tx-service-highlight__services {
    flex: 0 0 68%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: stretch;
}


.tx-service-highlight__item {
    min-width: 0;
    display: flex;
    align-items: center;
    padding: 5px 5px;
    border-left: 1px solid #eeeeee;
}


/* =========================================
   ICON
   ========================================= */

.tx-service-highlight__icon {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ff4d4d;
    font-size: 25px;
}

.tx-service-highlight__icon img {
    width: 100%;
}

.tx-service-highlight__icon i {
    display: block;
}


/* =========================================
   TEXT
   ========================================= */

.tx-service-highlight__item-content {
    min-width: 0;

    display: flex;
    flex-direction: column;

    padding-left: 8px;
}

.tx-service-highlight__item-content strong {
    display: block;
    color: #333;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 700;
    /* white-space: nowrap; */
}

.tx-service-highlight__item-content span {
    display: block;
    margin-top: 2px;
    color: #888;
    font-size: 13px;
    line-height: 1.4;
    /* white-space: nowrap; */
}


/* =========================================
   TABLET
   ========================================= */

@media (max-width: 900px) {

    .tx-service-highlight__inner {
        align-items: flex-start;
        flex-direction: column;
        gap: 15px;
    }

    .tx-service-highlight__intro {
        width: 100%;
        padding-right: 0;
    }

    .tx-service-highlight__services {
        width: 100%;
        flex-basis: auto;
    }

    .tx-service-highlight__item:first-child {
        border-left: 0;
    }
}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 600px) {

    .tx-service-highlight__inner {
        padding: 12px;
    }

    .tx-service-highlight__image {
        width: 85px;
        height: 65px;
        flex-basis: 85px;
    }

    .tx-service-highlight__content {
        padding-left: 10px;
    }

    .tx-service-highlight__desc {
        display: none;
    }

    .tx-service-highlight__services {
        grid-template-columns: repeat(2, 1fr);
    }

    .tx-service-highlight__item {
        padding: 9px 5px;
    }

    .tx-service-highlight__item:nth-child(3) {
        border-left: 0;
    }
}






@media (max-width: 1024px) and (min-width: 992px){
    .products > .product-small {
        flex-basis: 25% !important;
        max-width: 25% !important;
    }
    .header-vertical-menu__title {
        font-size: 16px!important;
    }
    .header-bottom-nav > .menu-item > a {
        font-size: 15px;
    }
}

@media (max-width: 1200px){
    .tx-service-highlight__inner {
        display: block;
    }
    .tx-service-highlight__services {
        margin-top: 30px;
    }
    .tx-service-highlight__intro {
        justify-content: center;
    }
}

@media (max-width: 767px){
    .tx-service-highlight__services {
        margin-top: 0px!important;
        display: block!important;
    }
    .tx-service-highlight__item{
        margin-top: 10px!important;
    }
    .tp-hud-section__title {
        font-size: 14px;
    }
    .tx-service-highlight__icon {
        flex: 0 0 33px!important;
    }
    .products.row > div {
        padding-inline: 5px;
    }

    .products.row {
        margin-left: -5px!important;
        margin-right: -5px!important;
    }
}


.woocommerce-breadcrumb a, .woocommerce-breadcrumb span {
    display: none;
}

/* =====================================================================
   SK — Khối mô tả danh mục, phương án A (thêm ngày 15/10/2026, cập nhật responsive)
   Để gỡ: xoá toàn bộ từ dòng này đến "SK — HẾT".
   ===================================================================== */
.tp-hud-scope .sk-card{
  --sk-red:#d0121b;
  --sk-red-tint:#fff1f1;
  --sk-ink:#1c2128;
  --sk-body:#3d4450;
  --sk-muted:#6b7380;
  --sk-line:#e6e8ec;
  --sk-soft:#f7f8fa;
  --sk-radius:14px;
  --sk-header-offset:120px;
  font-family:"Be Vietnam Pro",system-ui,sans-serif;
  color:var(--sk-body);
  background:#fff;
  border:1px solid var(--sk-line);
  border-radius:18px;
  padding:36px 40px 28px;
}
.tp-hud-scope .sk-card *,.tp-hud-scope .sk-card *::before,.tp-hud-scope .sk-card *::after{box-sizing:border-box}

/* Nội dung */
.tp-hud-scope .sk-body{position:relative;overflow:hidden;overflow:clip;max-height:380px;transition:max-height .45s ease;overflow-wrap:break-word;word-break:normal}
.tp-hud-scope .sk-body::after{content:"";position:absolute;left:0;right:0;bottom:0;height:120px;pointer-events:none;background:linear-gradient(rgba(255,255,255,0),#fff 85%);transition:opacity .3s}
.tp-hud-scope .sk-card.is-open .sk-body{max-height:none}
.tp-hud-scope .sk-card.is-open .sk-body::after{opacity:0}
.tp-hud-scope .sk-body h1{font-family:inherit;font-size:28px;line-height:1.3;font-weight:700;color:var(--sk-ink);margin:0 0 18px;letter-spacing:-.015em}
.tp-hud-scope .sk-body h2{font-family:inherit;font-size:22px;line-height:1.35;font-weight:700;color:var(--sk-ink);margin:36px 0 12px;letter-spacing:-.01em}
.tp-hud-scope .sk-body h3{font-family:inherit;font-size:17px;line-height:1.45;font-weight:600;color:var(--sk-ink);margin:24px 0 8px;padding-left:14px;border-left:3px solid var(--sk-red)}
.tp-hud-scope .sk-body h2,.tp-hud-scope .sk-body h3{scroll-margin-top:calc(var(--sk-header-offset) + 16px)}
.tp-hud-scope .sk-body p{font-size:16px;line-height:1.75;margin:0 0 14px;color:var(--sk-body)}
.tp-hud-scope .sk-body strong{color:var(--sk-ink);font-weight:600}
.tp-hud-scope .sk-body a{color:var(--sk-red);text-decoration:underline;text-underline-offset:3px}
.tp-hud-scope .sk-body ul{list-style:none;margin:6px 0 18px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 32px}
.tp-hud-scope .sk-body li{position:relative;margin:0;padding:11px 0 11px 34px;line-height:1.6;border-bottom:1px dashed var(--sk-line);list-style:none}
.tp-hud-scope .sk-body li::before{content:"";position:absolute;left:0;top:13px;width:20px;height:20px;border-radius:50%;background:var(--sk-red-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d0121b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/12px no-repeat}
.tp-hud-scope .sk-body ol{margin:6px 0 18px 22px}
.tp-hud-scope .sk-body img{max-width:100%;height:auto;border-radius:12px}
.tp-hud-scope .sk-body iframe,.tp-hud-scope .sk-body video{max-width:100%}
.tp-hud-scope .sk-body table{display:block;max-width:100%;overflow-x:auto;border-collapse:collapse}
.tp-hud-scope .sk-body td,.tp-hud-scope .sk-body th{padding:8px 12px;border:1px solid var(--sk-line)}

/* Nút xem thêm */
.tp-hud-scope .sk-expand{display:flex;justify-content:center;margin:6px 0 0}
.tp-hud-scope .sk-expand button{display:inline-flex;align-items:center;gap:8px;cursor:pointer;margin:0;min-height:0;font:600 15px/1 "Be Vietnam Pro",system-ui,sans-serif;text-transform:none;letter-spacing:0;color:var(--sk-red);background:#fff;border:1.5px solid var(--sk-red);border-radius:999px;padding:12px 22px;transition:background .15s,color .15s}
.tp-hud-scope .sk-expand .sk-lbl--short{display:none}
@media (hover:hover){.tp-hud-scope .sk-expand button:hover{background:var(--sk-red);color:#fff}}
.tp-hud-scope .sk-expand button:active{background:var(--sk-red);color:#fff}
.tp-hud-scope .sk-expand button:focus-visible{outline:3px solid rgba(208,18,27,.3);outline-offset:2px}
.tp-hud-scope .sk-expand svg{width:16px;height:16px;transition:transform .25s}
.tp-hud-scope .sk-card.is-open .sk-expand svg{transform:rotate(180deg)}

/* Mục lục */
.tp-hud-scope .sk-toc{margin-top:28px;background:var(--sk-soft);border:1px solid var(--sk-line);border-radius:var(--sk-radius);padding:20px 24px 14px}
.tp-hud-scope .sk-toc__title{display:flex;align-items:center;gap:10px;margin:0 0 12px;font-size:16px;font-weight:700;color:var(--sk-ink)}
.tp-hud-scope .sk-toc__title svg{width:20px;height:20px;color:var(--sk-red);flex:none}
.tp-hud-scope .sk-toc__list{list-style:none;margin:0;padding:0;column-count:2;column-gap:40px}
.tp-hud-scope .sk-toc__list > li{break-inside:avoid;margin:0;padding:4px 0 8px;list-style:none}
.tp-hud-scope .sk-toc__sub{list-style:none;margin:2px 0 0;padding:0 0 0 14px;border-left:2px solid var(--sk-line)}
.tp-hud-scope .sk-toc__sub li{margin:0;list-style:none}
.tp-hud-scope .sk-toc a{text-decoration:none;display:inline-block;line-height:1.5}
.tp-hud-scope .sk-toc__list > li > a{font-size:15px;font-weight:600;color:var(--sk-ink);padding:2px 0}
.tp-hud-scope .sk-toc__sub a{font-size:14.5px;color:var(--sk-muted);padding:4px 0}
@media (hover:hover){.tp-hud-scope .sk-toc a:hover{color:var(--sk-red)}}
.tp-hud-scope .sk-toc a:focus-visible{outline:2px solid var(--sk-red);outline-offset:2px;border-radius:4px}

/* 4 mục thông tin (accordion có sẵn) */
.tp-hud-scope .sk-card .tp-hud-accordion{margin-top:24px;display:grid;gap:10px}
.tp-hud-scope .sk-card.is-empty .tp-hud-accordion{margin-top:0}
.tp-hud-scope .sk-card .tp-hud-section,.tp-hud-scope .sk-card .tp-hud-section:last-child{border:1px solid var(--sk-line);border-radius:var(--sk-radius);background:#fff;transition:border-color .15s}
.tp-hud-scope .sk-card .tp-hud-section[data-sk-open="true"]{border-color:#f3c4c6}
.tp-hud-scope .sk-card .tp-hud-section__head{gap:14px;padding:14px 18px;margin:0;min-height:0;border-radius:var(--sk-radius);text-transform:none;letter-spacing:0;font-family:inherit;text-align:left;cursor:pointer}
@media (hover:hover){.tp-hud-scope .sk-card .tp-hud-section__head:hover{background:var(--sk-soft)}}
.tp-hud-scope .sk-card .tp-hud-section[data-sk-open="true"] .tp-hud-section__head:hover{background:transparent}
.tp-hud-scope .sk-card .tp-hud-section__head:focus-visible{outline:2px solid var(--sk-red);outline-offset:-2px}
.tp-hud-scope .sk-card .tp-hud-section__icon{flex:none;width:44px;height:44px;border-radius:12px;background:var(--sk-red-tint);color:var(--sk-red);display:grid;place-items:center;position:relative;overflow:hidden;transition:background .15s,color .15s}
.tp-hud-scope .sk-card .tp-hud-section[data-sk-open="true"] .tp-hud-section__icon{background:var(--sk-red);color:#fff}
.tp-hud-scope .sk-card .tp-hud-section__title{font-family:inherit;font-size:16px;font-weight:600;color:var(--sk-ink);line-height:1.4}
.tp-hud-scope .sk-card .tp-hud-section__chevron{width:20px;height:20px;color:var(--sk-muted)!important;transition:transform .25s}
.tp-hud-scope .sk-card .tp-hud-section[data-sk-open="true"] .tp-hud-section__chevron{color:var(--sk-red)!important}
.tp-hud-scope .sk-card .tp-hud-section__body{padding:0 22px 20px 76px;font-size:15.5px;line-height:1.75;color:var(--sk-body)}
.tp-hud-scope .sk-card .tp-hud-section__body p{margin:0 0 12px}
.tp-hud-scope .sk-card .tp-hud-section__body p:last-child{margin-bottom:0}

/* Bộ icon nét mảnh thay cho ảnh (4 mục đầu) */
.tp-hud-scope .sk-card .tp-hud-section:nth-child(-n+4) .tp-hud-section__icon img{display:none}
.tp-hud-scope .sk-card .tp-hud-section:nth-child(-n+4) .tp-hud-section__icon::before{content:"";width:22px;height:22px;background:currentColor;-webkit-mask:var(--sk-ico) center/contain no-repeat;mask:var(--sk-ico) center/contain no-repeat}
.tp-hud-scope .sk-card .tp-hud-section:nth-child(1){--sk-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9.5V20h16V9.5'/%3E%3Cpath d='M3 9.5L4.6 4h14.8L21 9.5a2.6 2.6 0 0 1-4.5 1.6A2.6 2.6 0 0 1 12 11a2.6 2.6 0 0 1-4.5.1A2.6 2.6 0 0 1 3 9.5z'/%3E%3Cpath d='M9.5 20v-5h5v5'/%3E%3C/svg%3E")}
.tp-hud-scope .sk-card .tp-hud-section:nth-child(2){--sk-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 15.5v-3l2-5A2 2 0 0 1 6.9 6h7.2a2 2 0 0 1 1.9 1.5l1 3'/%3E%3Cpath d='M3 12.5h10'/%3E%3Cpath d='M3 15.5h8'/%3E%3Ccircle cx='6.5' cy='17.5' r='1.6'/%3E%3Ccircle cx='17.5' cy='16' r='3.5'/%3E%3Cpath d='M20 18.5L22 20.5'/%3E%3C/svg%3E")}
.tp-hud-scope .sk-card .tp-hud-section:nth-child(3){--sk-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='3.5' width='14' height='17' rx='2'/%3E%3Cpath d='M9 3.5V5h6V3.5'/%3E%3Cpath d='M8.5 10h7'/%3E%3Cpath d='M8.5 13.5h7'/%3E%3Cpath d='M8.5 17h4'/%3E%3C/svg%3E")}
.tp-hud-scope .sk-card .tp-hud-section:nth-child(4){--sk-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7.5h14l-1.2 11.1a2 2 0 0 1-2 1.9H8.2a2 2 0 0 1-2-1.9z'/%3E%3Cpath d='M9 9.5V6a3 3 0 0 1 6 0v3.5'/%3E%3Cpath d='M9.3 14.2l1.9 1.9 3.6-3.6'/%3E%3C/svg%3E")}

/* Trạng thái rỗng / ngắn */
.tp-hud-scope .sk-card.is-empty .sk-body,.tp-hud-scope .sk-card.is-empty .sk-expand,.tp-hud-scope .sk-card.is-empty .sk-toc{display:none}
.tp-hud-scope .sk-card.is-short .sk-expand{display:none}
.tp-hud-scope .sk-card.is-short .sk-body{max-height:none}
.tp-hud-scope .sk-card.is-short .sk-body::after{display:none}

/* Responsive
   >=1200: máy tính | 821-1199: laptop nhỏ / tablet ngang | 768-820: tablet dọc
   <=767: điện thoại (nút rút gọn "Xem thêm / Thu gọn") | <=380: điện thoại nhỏ */
@media (max-width:1199px){
  .tp-hud-scope .sk-card{padding:30px 30px 24px}
  .tp-hud-scope .sk-body h1{font-size:26px}
}
@media (max-width:820px){
  .tp-hud-scope .sk-card{padding:26px 22px 20px}
  .tp-hud-scope .sk-toc__list{column-count:1}
  .tp-hud-scope .sk-body ul{grid-template-columns:1fr}
}
@media (max-width:767px){
  .tp-hud-scope .sk-card{padding:20px 16px 16px;border-radius:14px}
  .tp-hud-scope .sk-body{max-height:340px}
  .tp-hud-scope .sk-body::after{height:100px}
  .tp-hud-scope .sk-body h1{font-size:22px;margin-bottom:14px}
  .tp-hud-scope .sk-body h2{font-size:19px;margin:28px 0 10px}
  .tp-hud-scope .sk-body h3{font-size:16px;margin:20px 0 6px;padding-left:12px}
  .tp-hud-scope .sk-body p{font-size:15.5px;line-height:1.7}
  .tp-hud-scope .sk-body li{padding:10px 0 10px 32px;font-size:15px}
  .tp-hud-scope .sk-expand .sk-lbl--full{display:none}
  .tp-hud-scope .sk-expand .sk-lbl--short{display:inline}
  .tp-hud-scope .sk-expand button{min-height:44px;padding:11px 26px;font-size:15px}
  .tp-hud-scope .sk-toc{margin-top:22px;padding:16px 14px 10px;border-radius:12px}
  .tp-hud-scope .sk-toc__title{font-size:15.5px;margin-bottom:8px}
  .tp-hud-scope .sk-toc a{display:block;padding-top:6px;padding-bottom:6px}
  .tp-hud-scope .sk-toc__list > li{padding:2px 0 4px}
  .tp-hud-scope .sk-card .tp-hud-accordion{margin-top:18px;gap:8px}
  .tp-hud-scope .sk-card .tp-hud-section__head{gap:12px;padding:12px 12px}
  .tp-hud-scope .sk-card .tp-hud-section__icon{width:40px;height:40px;border-radius:11px}
  .tp-hud-scope .sk-card .tp-hud-section__title{font-size:15px}
  .tp-hud-scope .sk-card .tp-hud-section__body{padding:0 14px 16px;font-size:15px}
}
@media (max-width:380px){
  .tp-hud-scope .sk-card{padding:18px 12px 12px}
  .tp-hud-scope .sk-body h1{font-size:20px}
  .tp-hud-scope .sk-body h2{font-size:18px}
  .tp-hud-scope .sk-card .tp-hud-section__icon{width:36px;height:36px}
  .tp-hud-scope .sk-card .tp-hud-section:nth-child(-n+4) .tp-hud-section__icon::before{width:20px;height:20px}
}
@media (prefers-reduced-motion:reduce){
  .tp-hud-scope .sk-card *{transition:none!important}
}
/* ===================== SK — HẾT ===================== */