/* ================================================================
   SAFETY LIBRARY — safety_library.css
   Theme: vinapro_b2b | NukeViet Page Module
   Tham khảo: vinapro.org/news/safety-library/
   Dùng token --b2b-* từ b2b-theme.css
   ================================================================ */

/* ── SHELL ──────────────────────────────────────────────────── */
.kb-wrap {
    font-family: var(--b2b-font-base);
    color: var(--b2b-gray-800);
}

/* ════════════════════════════════════════════════════════════════
   1. TAB NAVIGATION
   Sticky, horizontal scroll, no page reload
════════════════════════════════════════════════════════════════ */
.kb-tabs {
    position: sticky;
    top: 0;
    z-index: 90;
    background: #fff;
    border-bottom: 2px solid var(--b2b-gray-200);
    box-shadow: var(--b2b-shadow-sm);
    margin: 0 0 1.25rem;
}

.kb-tabs__scroll {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 0 4px;
    gap: 2px;
}
.kb-tabs__scroll::-webkit-scrollbar { display: none; }

.kb-tab {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 46px;
    padding: 0 14px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    font-family: var(--b2b-font-base);
    font-size: 13px;
    font-weight: 500;
    color: var(--b2b-gray-600);
    white-space: nowrap;
    text-decoration: none;
    transition: color .16s ease, border-color .16s ease, background .16s ease;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.kb-tab:hover {
    color: var(--b2b-primary);
    background: rgba(26, 58, 92, .04);
    text-decoration: none;
}

.kb-tab.active {
    color: var(--b2b-primary);
    border-bottom-color: var(--b2b-primary);
    font-weight: 700;
}

/* ════════════════════════════════════════════════════════════════
   2. GRID LAYOUT: 2/3 + 1/3
════════════════════════════════════════════════════════════════ */
.kb-grid {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 1.25rem;
    align-items: start;
}

.kb-main {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.kb-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: sticky;
    top: 54px;
}

/* ════════════════════════════════════════════════════════════════
   3. BASE CARD
════════════════════════════════════════════════════════════════ */
.kb-card {
    background: #fff;
    border: 1px solid var(--b2b-gray-200);
    border-radius: var(--b2b-radius-lg);
    box-shadow: var(--b2b-shadow-sm);
    overflow: hidden;
}

.kb-card--article { padding: 0; }

.kb-card__head {
    padding: 14px 20px 10px;
    border-bottom: 1px solid var(--b2b-gray-100);
}

.kb-card__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--b2b-gray-900);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.kb-card__body { padding: 20px; }

/* ════════════════════════════════════════════════════════════════
   4. ARTICLE CARD
════════════════════════════════════════════════════════════════ */
.kb-article__head {
    padding: 20px 24px 14px;
    border-bottom: 1px solid var(--b2b-gray-100);
}

.kb-article__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 11px;
    color: var(--b2b-gray-500);
}

.kb-meta-sep { opacity: .4; }
.kb-meta-date,
.kb-meta-views { color: var(--b2b-gray-500); }

.kb-article__title {
    font-size: 22px;
    font-weight: 700;
    color: var(--b2b-gray-900);
    margin: 0 0 12px;
    line-height: 1.35;
    letter-spacing: -.02em;
}

.kb-article__body {
    padding: 20px 24px;
}

.kb-article__foot {
    padding: 12px 24px;
    border-top: 1px solid var(--b2b-gray-100);
    background: var(--b2b-gray-50);
}

/* Lead / description block */
.kb-lead {
    font-size: 15px;
    color: var(--b2b-gray-700);
    line-height: 1.7;
    margin-bottom: 18px;
    padding: 12px 16px;
    background: rgba(26, 58, 92, .05);
    border-left: 3px solid var(--b2b-primary);
    border-radius: 0 var(--b2b-radius) var(--b2b-radius) 0;
}

/* ════════════════════════════════════════════════════════════════
   5. TERMINOLOGY TABLE STYLING
   The main content is a table: Thuật ngữ | Định nghĩa | Ví dụ
   This is INSIDE .bodytext — we style it here
════════════════════════════════════════════════════════════════ */
.kb-body-content .bodytext table,
#page-bodyhtml table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 13.5px;
    background: #fff;
    border-radius: var(--b2b-radius-lg);
    overflow: hidden;
    box-shadow: var(--b2b-shadow-sm);
    border: 1px solid var(--b2b-gray-200);
}

/* Empty header row (the site has an empty tr before data) */
.kb-body-content .bodytext table thead tr:first-child th:empty,
#page-bodyhtml table thead tr:first-child td:empty {
    display: none;
}

.kb-body-content .bodytext table thead,
#page-bodyhtml table thead {
    background: var(--b2b-primary);
    color: #fff;
}

.kb-body-content .bodytext table th,
#page-bodyhtml table th {
    padding: 10px 14px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    text-align: left;
    white-space: nowrap;
    color: #fff;
    border-bottom: 2px solid rgba(255,255,255,.15);
}

/* Column widths: match vinapro.org layout */
.kb-body-content .bodytext table th:first-child,
#page-bodyhtml table td:first-child {
    width: 28%;
    min-width: 160px;
}

.kb-body-content .bodytext table th:nth-child(2),
#page-bodyhtml table td:nth-child(2) {
    width: 44%;
}

.kb-body-content .bodytext table th:last-child,
#page-bodyhtml table td:last-child {
    width: 28%;
}

.kb-body-content .bodytext table td,
#page-bodyhtml table td {
    padding: 12px 14px;
    vertical-align: top;
    border-bottom: 1px solid var(--b2b-gray-100);
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--b2b-gray-800);
}

.kb-body-content .bodytext table tbody tr:last-child td,
#page-bodyhtml table tbody tr:last-child td {
    border-bottom: none;
}

/* Alternating rows */
.kb-body-content .bodytext table tbody tr:nth-child(even) td,
#page-bodyhtml table tbody tr:nth-child(even) td {
    background: var(--b2b-gray-50);
}

/* Hover row */
.kb-body-content .bodytext table tbody tr:hover td,
#page-bodyhtml table tbody tr:hover td {
    background: rgba(26, 58, 92, .04);
}

/* Term cell: bold VN name + italic EN name */
.kb-body-content .bodytext table td:first-child,
#page-bodyhtml table td:first-child {
    font-weight: 600;
    color: var(--b2b-primary);
}

.kb-body-content .bodytext table td:first-child em,
#page-bodyhtml table td:first-child em {
    display: block;
    font-style: italic;
    font-weight: 400;
    font-size: 12px;
    color: var(--b2b-gray-500);
    margin-top: 2px;
}

/* Example cell: italic gray */
.kb-body-content .bodytext table td:last-child,
#page-bodyhtml table td:last-child {
    font-size: 12.5px;
    color: var(--b2b-gray-600);
    font-style: italic;
}

/* Section heading inside content (e.g. "LOTO", "PPE") */
.kb-body-content .bodytext h2,
#page-bodyhtml h2 {
    font-size: 18px;
    font-weight: 700;
    color: var(--b2b-primary);
    margin: 28px 0 12px;
    padding: 8px 14px;
    background: rgba(26, 58, 92, .07);
    border-left: 4px solid var(--b2b-primary);
    border-radius: 0 var(--b2b-radius) var(--b2b-radius) 0;
}

.kb-body-content .bodytext h3,
#page-bodyhtml h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--b2b-gray-800);
    margin: 20px 0 8px;
}

/* ════════════════════════════════════════════════════════════════
   6. FIGURES
════════════════════════════════════════════════════════════════ */
.kb-fig { margin: 0 0 16px; }

.kb-fig--left {
    float: left;
    margin-right: 18px;
    cursor: pointer;
}

.kb-fig--center {
    float: none;
    clear: both;
    text-align: center;
    cursor: pointer;
}

.kb-fig__img {
    max-width: 100%;
    border-radius: var(--b2b-radius);
    border: 1px solid var(--b2b-gray-200);
}

.kb-fig__cap {
    font-size: 11px;
    color: var(--b2b-gray-400);
    text-align: center;
    margin-top: 4px;
}

/* ════════════════════════════════════════════════════════════════
   7. ALERT
════════════════════════════════════════════════════════════════ */
.kb-alert {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 16px;
    border-radius: var(--b2b-radius);
    font-size: 13px;
    font-weight: 500;
}

.kb-alert--danger {
    background: #fff5f5;
    border: 1px solid #fecaca;
    color: var(--b2b-error);
}

/* ════════════════════════════════════════════════════════════════
   8. BADGES & TAGS
════════════════════════════════════════════════════════════════ */
.kb-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.kb-badge--primary { background: rgba(26,58,92,.1); color: var(--b2b-primary); }
.kb-badge--success { background: rgba(46,125,50,.1); color: var(--b2b-success); }
.kb-badge--danger  { background: rgba(211,47,47,.1); color: var(--b2b-error); }

.kb-tag-group { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }

.kb-tag {
    display: inline-flex;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
}

.kb-tag--navy   { background: rgba(26,58,92,.1);  color: var(--b2b-primary); }
.kb-tag--green  { background: rgba(46,125,50,.1); color: var(--b2b-success); }
.kb-tag--orange { background: rgba(232,98,26,.1); color: var(--b2b-accent); }
.kb-tag--red    { background: rgba(211,47,47,.1); color: var(--b2b-error); }

/* ════════════════════════════════════════════════════════════════
   9. RISK PILLS
════════════════════════════════════════════════════════════════ */
.kb-risk-pill {
    display: inline-flex;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
}

.kb-risk-pill--low  { background: rgba(46,125,50,.12); color: var(--b2b-success); }
.kb-risk-pill--med  { background: rgba(245,158,11,.15); color: #b45309; }
.kb-risk-pill--high { background: rgba(211,47,47,.12); color: var(--b2b-error); }
.kb-risk-pill--crit { background: #3b0764; color: #e9d5ff; }

/* ════════════════════════════════════════════════════════════════
   10. ACTION BUTTONS
════════════════════════════════════════════════════════════════ */
.kb-btn-action {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: var(--b2b-radius-sm);
    font-size: 11px;
    font-weight: 500;
    text-decoration: none;
    border: 1px solid var(--b2b-gray-300);
    background: #fff;
    color: var(--b2b-gray-700);
    transition: all .15s ease;
    cursor: pointer;
    white-space: nowrap;
}

.kb-btn-action:hover { border-color: var(--b2b-primary); color: var(--b2b-primary); text-decoration: none; }
.kb-btn-action--edit:hover { border-color: var(--b2b-success); color: var(--b2b-success); }
.kb-btn-action--del:hover  { border-color: var(--b2b-error);   color: var(--b2b-error); }

.kb-link-more { font-size: 11px; font-weight: 600; color: var(--b2b-primary-light); text-decoration: none; }
.kb-link-more:hover { text-decoration: underline; }

/* ════════════════════════════════════════════════════════════════
   11. TOOLBAR (List view)
════════════════════════════════════════════════════════════════ */
.kb-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.kb-toolbar__left { display: flex; align-items: baseline; gap: 10px; }

.kb-toolbar__title {
    font-size: 16px;
    font-weight: 700;
    color: var(--b2b-gray-900);
    margin: 0;
}

.kb-toolbar__count { font-size: 11px; color: var(--b2b-gray-400); }

.kb-view-toggle {
    display: flex;
    background: var(--b2b-gray-100);
    border-radius: var(--b2b-radius-sm);
    padding: 2px;
    gap: 2px;
}

.kb-vbtn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 28px;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: 3px;
    cursor: pointer;
    font-size: 15px;
    color: var(--b2b-gray-500);
    transition: all .15s ease;
    line-height: 1;
}

.kb-vbtn.active {
    background: #fff;
    color: var(--b2b-primary);
    box-shadow: var(--b2b-shadow-sm);
}

/* ════════════════════════════════════════════════════════════════
   12. TABLE (List view)
════════════════════════════════════════════════════════════════ */
.kb-table-wrap {
    overflow-x: auto;
    border-radius: var(--b2b-radius-lg);
    border: 1px solid var(--b2b-gray-200);
    box-shadow: var(--b2b-shadow-sm);
}

.kb-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    font-size: 13px;
}

.kb-th {
    padding: 9px 14px;
    text-align: left;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--b2b-gray-500);
    background: var(--b2b-gray-50);
    border-bottom: 1px solid var(--b2b-gray-200);
    white-space: nowrap;
}

.kb-th-c { text-align: center; }

.kb-tr {
    cursor: pointer;
    border-bottom: 1px solid var(--b2b-gray-100);
    transition: background .12s ease;
}

.kb-tr:last-child { border-bottom: none; }
.kb-tr:hover { background: rgba(26, 58, 92, .04); }

.kb-td {
    padding: 12px 14px;
    vertical-align: middle;
    color: var(--b2b-gray-800);
}

.kb-td-name {
    display: flex;
    align-items: center;
    gap: 10px;
}

.kb-td-c { text-align: center; }

.kb-td-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex-wrap: wrap;
}

.kb-thumb {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: var(--b2b-radius-sm);
    border: 1px solid var(--b2b-gray-200);
    flex-shrink: 0;
}

.kb-td-title {
    font-weight: 600;
    color: var(--b2b-gray-900);
    text-decoration: none;
    font-size: 13px;
    line-height: 1.4;
}

.kb-td-title:hover { color: var(--b2b-primary); }

.kb-td-text {
    margin: 0;
    color: var(--b2b-gray-600);
    font-size: 12px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ════════════════════════════════════════════════════════════════
   13. BENTO CARD GRID (Grid view)
════════════════════════════════════════════════════════════════ */
.kb-bento-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}

.kb-bcard {
    background: #fff;
    border: 1px solid var(--b2b-gray-200);
    border-radius: var(--b2b-radius-lg);
    box-shadow: var(--b2b-shadow-sm);
    overflow: hidden;
    cursor: pointer;
    position: relative;
    transition: transform .2s ease, box-shadow .2s ease;
}

.kb-bcard:hover { transform: translateY(-2px); box-shadow: var(--b2b-shadow); }

.kb-bcard__img-wrap {
    aspect-ratio: 16/9;
    overflow: hidden;
    background: var(--b2b-gray-100);
}

.kb-bcard__img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .3s ease;
}

.kb-bcard:hover .kb-bcard__img { transform: scale(1.04); }

.kb-bcard__body { padding: 14px 16px; }

.kb-bcard__title {
    font-size: 14px;
    font-weight: 600;
    margin: 8px 0;
    line-height: 1.4;
}

.kb-bcard__title a { color: var(--b2b-gray-900); text-decoration: none; }
.kb-bcard__title a:hover { color: var(--b2b-primary); }

.kb-bcard__desc {
    font-size: 12px;
    color: var(--b2b-gray-600);
    margin: 0 0 12px;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.kb-bcard__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.kb-bcard__admin {
    position: absolute;
    top: 8px; right: 8px;
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity .15s ease;
}

.kb-bcard:hover .kb-bcard__admin { opacity: 1; }

/* ════════════════════════════════════════════════════════════════
   14. SIDEBAR BENTO BLOCKS
════════════════════════════════════════════════════════════════ */
.kb-bento {
    background: #fff;
    border: 1px solid var(--b2b-gray-200);
    border-radius: var(--b2b-radius-lg);
    box-shadow: var(--b2b-shadow-sm);
    padding: 14px 16px;
}

.kb-bento--hero {
    background: linear-gradient(135deg, rgba(26,58,92,.06) 0%, #fff 70%);
    border-color: rgba(26,58,92,.18);
}

.kb-bento--ai {
    background: linear-gradient(135deg, #f5f3ff 0%, #fff 65%);
    border-color: #ddd6fe;
}

.kb-bento__icon { font-size: 26px; display: block; margin-bottom: 6px; }

.kb-bento__title {
    font-size: 15px;
    font-weight: 700;
    color: var(--b2b-gray-900);
    margin: 0 0 6px;
}

.kb-bento__desc {
    font-size: 12px;
    color: var(--b2b-gray-600);
    line-height: 1.55;
    margin: 0 0 10px;
}

.kb-bento__label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--b2b-gray-400);
    margin-bottom: 10px;
}

/* Risk Grid */
.kb-risk-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.kb-risk-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 9px;
    border-radius: var(--b2b-radius-sm);
    font-size: 11px;
    font-weight: 500;
}

.kb-risk__dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }

.kb-risk--low      { background: rgba(46,125,50,.08);  color: var(--b2b-success); }
.kb-risk--low .kb-risk__dot      { background: var(--b2b-success); }
.kb-risk--medium   { background: rgba(245,158,11,.1);  color: #b45309; }
.kb-risk--medium .kb-risk__dot   { background: #f59e0b; }
.kb-risk--high     { background: rgba(211,47,47,.08);  color: var(--b2b-error); }
.kb-risk--high .kb-risk__dot     { background: var(--b2b-error); }
.kb-risk--critical { background: #3b0764; color: #e9d5ff; }
.kb-risk--critical .kb-risk__dot { background: #a855f7; }

/* AI quote */
.kb-ai-quote {
    font-size: 13px;
    font-style: italic;
    color: var(--b2b-gray-800);
    line-height: 1.65;
    margin: 0 0 10px;
    padding: 0;
    border: none;
}

.kb-ai-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    color: var(--b2b-gray-400);
}

/* Stats grid */
.kb-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.kb-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px;
    background: var(--b2b-gray-50);
    border-radius: var(--b2b-radius-sm);
    border: 1px solid var(--b2b-gray-100);
}

.kb-stat__num { font-size: 1.3rem; font-weight: 800; line-height: 1; margin-bottom: 2px; }
.kb-stat--navy   { color: var(--b2b-primary); }
.kb-stat--green  { color: var(--b2b-success); }
.kb-stat--orange { color: var(--b2b-accent); }
.kb-stat--red    { color: var(--b2b-error); }
.kb-stat__lbl { font-size: 10px; color: var(--b2b-gray-500); font-weight: 500; }

/* ════════════════════════════════════════════════════════════════
   15. CHECKLIST
════════════════════════════════════════════════════════════════ */
.kb-checklist {
    list-style: none;
    padding: 0;
    margin: 0 0 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.kb-checklist li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.kb-chk {
    width: 15px; height: 15px;
    margin-top: 1px;
    accent-color: var(--b2b-success);
    cursor: pointer;
    flex-shrink: 0;
}

.kb-checklist label {
    font-size: 12px;
    color: var(--b2b-gray-600);
    cursor: pointer;
    margin: 0;
    line-height: 1.4;
    transition: color .15s;
}

.kb-chk:checked + label { color: var(--b2b-gray-400); text-decoration: line-through; }

.kb-progress-wrap { display: flex; flex-direction: column; gap: 4px; }

.kb-progress-bar {
    height: 5px;
    background: var(--b2b-gray-200);
    border-radius: 999px;
    overflow: hidden;
}

.kb-progress-fill {
    height: 100%;
    background: var(--b2b-success);
    border-radius: 999px;
    transition: width .35s ease;
}

.kb-progress-text { font-size: 10px; color: var(--b2b-gray-400); text-align: right; }

/* ════════════════════════════════════════════════════════════════
   16. SIDEBAR CARD
════════════════════════════════════════════════════════════════ */
.kb-sidebar-card {
    background: #fff;
    border: 1px solid var(--b2b-gray-200);
    border-radius: var(--b2b-radius-lg);
    box-shadow: var(--b2b-shadow-sm);
    overflow: hidden;
}

.kb-sidebar-card__head {
    padding: 10px 16px;
    border-bottom: 1px solid var(--b2b-gray-100);
}

.kb-sidebar-card__title {
    font-size: 13px;
    font-weight: 600;
    color: var(--b2b-gray-900);
    margin: 0;
}

/* Related list */
.kb-related-list { list-style: none; padding: 4px 0; margin: 0; }
.kb-related-item { border-bottom: 1px solid var(--b2b-gray-100); }
.kb-related-item:last-child { border-bottom: none; }

.kb-related-link {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 8px 16px;
    text-decoration: none;
    color: var(--b2b-gray-600);
    font-size: 12px;
    line-height: 1.45;
    transition: all .15s ease;
}

.kb-related-link:hover { background: rgba(26,58,92,.04); color: var(--b2b-primary); text-decoration: none; }

.kb-related-arrow { color: var(--b2b-primary); flex-shrink: 0; font-size: 1.1rem; line-height: 1.2; }
.kb-related-text { flex: 1; }

/* Cat list */
.kb-catlist { list-style: none; padding: 4px 0; margin: 0; }
.kb-catlist li { border-bottom: 1px solid var(--b2b-gray-100); }
.kb-catlist li:last-child { border-bottom: none; }

.kb-catlist__link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    text-decoration: none;
    color: var(--b2b-gray-700);
    font-size: 12px;
    font-weight: 500;
    transition: all .15s ease;
}

.kb-catlist__link:hover { background: rgba(26,58,92,.04); color: var(--b2b-primary); text-decoration: none; }
.kb-catlist__link span:last-child { margin-left: auto; color: var(--b2b-gray-400); font-size: 1.1rem; }

/* ════════════════════════════════════════════════════════════════
   17. PAGINATION
════════════════════════════════════════════════════════════════ */
.kb-pagination { display: flex; justify-content: center; padding: 8px 0; }

/* ════════════════════════════════════════════════════════════════
   18. SOCIAL ROW
════════════════════════════════════════════════════════════════ */
.kb-social { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kb-social__item { display: flex; align-items: center; }

/* ════════════════════════════════════════════════════════════════
   19. VIEW PANE TOGGLE
════════════════════════════════════════════════════════════════ */
.kb-view-pane { animation: kbFade .2s ease; }
.kb-view-pane--hidden { display: none; }

@keyframes kbFade {
    from { opacity: 0; transform: translateY(5px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ════════════════════════════════════════════════════════════════
   20. TABLET ≤ 1024px
════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .kb-grid {
        grid-template-columns: 1fr;
    }

    .kb-sidebar {
        position: static;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        gap: 1rem;
    }
}

/* ════════════════════════════════════════════════════════════════
   21. MOBILE ≤ 767px
   KEY: terminology table → horizontal scroll
   KEY: list table rows → stacked cards
════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

    /* Tabs: compress on mobile */
    .kb-tab { padding: 0 10px; font-size: 12px; }

    /* Article */
    .kb-article__head,
    .kb-article__body { padding: 14px 16px; }

    .kb-article__title { font-size: 18px; }

    .kb-fig--left { float: none; margin-right: 0; }

    /* ── Terminology table: horizontal scroll on mobile ── */
    .kb-body-content .bodytext table,
    #page-bodyhtml table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        font-size: 12.5px;
        border-radius: 0;
    }

    .kb-body-content .bodytext table td,
    #page-bodyhtml table td {
        white-space: normal;
        min-width: 140px;
    }

    /* ── LIST TABLE → STACKED CARDS on mobile ── */
    .kb-table-wrap {
        border: none;
        box-shadow: none;
        background: transparent;
        border-radius: 0;
    }

    .kb-table,
    .kb-table thead,
    .kb-table tbody,
    .kb-table tr,
    .kb-table th,
    .kb-table td {
        display: block;
        width: 100%;
    }

    .kb-table thead { display: none; }

    .kb-tr {
        background: #fff;
        border: 1px solid var(--b2b-gray-200);
        border-radius: var(--b2b-radius-lg);
        box-shadow: var(--b2b-shadow-sm);
        margin-bottom: 12px;
        cursor: default;
    }

    .kb-tr:hover { background: #fff; }

    .kb-td {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        padding: 8px 14px;
        border-bottom: 1px solid var(--b2b-gray-100);
        font-size: 12.5px;
    }

    .kb-td:last-child { border-bottom: none; }

    /* data-label as field title */
    .kb-td::before {
        content: attr(data-label);
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .05em;
        color: var(--b2b-gray-400);
        width: 80px;
        flex-shrink: 0;
        padding-top: 1px;
    }

    .kb-td-name { flex-direction: column; }
    .kb-td-name::before { width: auto; }
    .kb-td-c { text-align: left; justify-content: flex-start; }
    .kb-td-action { flex-wrap: wrap; }

    /* Grid / bento */
    .kb-sidebar { grid-template-columns: 1fr; }
    .kb-bento-grid { grid-template-columns: 1fr; }
    .kb-stats-grid { grid-template-columns: 1fr 1fr; }
}

/* ════════════════════════════════════════════════════════════════
   22. PRINT
════════════════════════════════════════════════════════════════ */
@media print {
    .kb-tabs,
    .kb-sidebar,
    .kb-toolbar,
    .kb-social,
    .kb-article__foot,
    .kb-bcard__admin { display: none !important; }

    .kb-grid { grid-template-columns: 1fr; }
    .kb-card { box-shadow: none; border-color: #ccc; }

    .kb-body-content .bodytext table,
    #page-bodyhtml table {
        font-size: 11px;
        overflow: visible;
        white-space: normal;
    }
}