/*!
 * Soicau — thong-ke.css
 * © 2026 pickles.soicau
 */

.tk-wrap {
    color: var(--tk-text);
    font-size: var(--tk-font-base);
}

.tk-page-title {
    margin: 0 0 8px;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    color: var(--tk-text);
    background: transparent;
}

.tk-lead {
    font-weight: 700;
    text-align: center;
    margin: 8px 0 4px;
}

.tk-btn-outline {
    background: transparent;
    color: var(--tk-primary);
    border: 1px solid var(--tk-primary);
}
.tk-btn-outline:hover      { background: var(--tk-primary-bg); }
.tk-btn-outline.is-active  { background: var(--tk-primary); color: #fff; border-color: var(--tk-primary); }
.tk-btn-outline:disabled   { opacity: 0.6; cursor: wait; }

.tk-btn-sm {
    padding: 4px 12px;
    font-size: var(--tk-font-xs);
}

.tk-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--tk-border);
    border-radius: var(--tk-radius-sm);
    background: var(--tk-bg);
}
.tk-table {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
    margin: 0;
}
.tk-table thead tr {
    background: var(--tk-primary);
    color: var(--tk-text-inverse);
}
.tk-table th, .tk-table td {
    border: 1px solid var(--tk-border);
    padding: 6px 4px;
    vertical-align: middle;
}
.tk-table th {
    font-size: var(--tk-font-sm);
    font-weight: 600;
}
.tk-table td {
    min-width: 100px;
    background: var(--tk-bg);
}
@media (max-width: 768px) {
    .tk-table td { min-width: 60px; padding: 4px 2px; }
}

/* ===== Form ===== */
.tkn-form-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

#bdbt-form .tkn-form-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

#tkn-form .tkn-form-grid {
    grid-template-columns: 1fr;
}

#tsn-form .tsn-grid-dates {
    margin-top: var(--tk-gap);
}
@media (max-width: 720px) {
    #tsn-form .tk-form-grid-2 {
        grid-template-columns: 1fr;
    }
}

.tkn-form-row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--tk-gap);
    margin-top: var(--tk-gap);
}

.tkn-form-actions {
    display: flex;
    justify-content: center;
    margin-top: var(--tk-gap);
}

/* Toggle switch (công tắc) */
.tkn-switch {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: var(--tk-font-sm);
    color: var(--tk-text);
    user-select: none;
}
.tkn-switch input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
.tkn-switch-track {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
    background: #cbd5d6;
    border-radius: 999px;
    transition: background 0.18s ease;
    flex-shrink: 0;
}
.tkn-switch-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    transition: transform 0.18s ease;
}
.tkn-switch input:checked + .tkn-switch-track {
    background: var(--tk-primary);
}
.tkn-switch input:checked + .tkn-switch-track .tkn-switch-thumb {
    transform: translateX(18px);
}
.tkn-switch input:focus-visible + .tkn-switch-track {
    box-shadow: 0 0 0 3px rgba(5, 126, 134, 0.25);
}
.tkn-switch-label {
    font-weight: 400;
}

.tkn-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

/* ===== Heading ===== */
.tkn-lead {
    text-align: center;
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-text, #1f1f23);
    margin: 0 0 6px;
    padding-top: 8px;
}
.tkn-sub {
    text-align: center;
    color: var(--color-text-muted, #5c5c66);
    font-size: 13px;
    margin: 0 0 var(--tk-gap);
}
.tkn-link {
    color: var(--tk-primary);
    text-decoration: none;
}
.tkn-link:hover { text-decoration: underline; }

.tkn-badge {
    display: inline-block;
    padding: 2px 9px;
    margin-left: 6px;
    background: var(--tk-danger);
    color: #fff;
    border-radius: 999px;
    font-size: var(--tk-font-xs);
    font-weight: 600;
    letter-spacing: 0.2px;
    vertical-align: middle;
}

/* ===== Filter bar ===== */
.tkn-filter-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--tk-gap-sm);
    margin-bottom: var(--tk-gap);
}
.tkn-numbers { width: 100%; }
.tkn-quick    { width: 100%; }
.tkn-numbers {
    resize: vertical;
    min-height: 90px;
    line-height: 1.5;
    font-size: var(--tk-font-sm);
    align-self: stretch;
}
.tkn-numbers:focus { border-color: var(--tk-primary); }
.tkn-quick { height: 38px; }

/* ===== Bảng kết quả ===== */
.tkn-table-wrap {
    overflow-x: auto;
    border: 0;
    background: transparent;
}
.tkn-table {
    font-size: var(--tk-font-sm);
}

.tkn-table th {
    padding: 8px 6px;
    white-space: nowrap;
}
.tkn-table tbody td {
    padding: 7px 6px;
    background: var(--tk-bg);
}

.tkn-num {
    display: inline-block;
    min-width: 32px;
    color: var(--tk-text);
}

.tkn-count {
    color: var(--tk-text);
}
.tkn-days,
.tkn-days-hot,
.tkn-days-warm {
    color: var(--tk-text);
}

.tkn-empty-cell {
    color: var(--tk-text-muted);
    font-style: italic;
}

.tktn-form-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 900px) {
    .tktn-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

#tktn-thu option:disabled {
    color: var(--tk-text-muted);
    background: var(--tk-bg-alt);
}

.tktn-block {
    margin-top: var(--tk-gap);
    padding-top: var(--tk-gap);
    border-top: 1px solid var(--tk-border);
}
.tktn-block-title {
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text, #1f1f23);
    margin: 0 0 10px;
}

.tktn-list {
    line-height: 1.9;
    text-align: justify;
}
.tktn-item {
    display: inline-block;
    white-space: nowrap;
    margin-right: 6px;
    color: var(--tk-text);
}
.tktn-item b {
    color: var(--tk-primary-dark);
    font-weight: 700;
    margin-right: 2px;
}

.tktn-empty {
    text-align: center;
    padding: 14px;
    border-radius: var(--tk-radius-sm);
}

.tktsbs-table td {
    white-space: nowrap;
}
.tktsbs-pct {
    color: var(--tk-danger);
    font-weight: 400;
    font-size: 12px;
    margin-left: 2px;
}

.tkqt-tab[hidden] { display: none; }

.tkqt-tab-title {
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text, #1f1f23);
    margin: var(--tk-gap) 0 8px;
    padding-top: var(--tk-gap);
    border-top: 1px solid var(--tk-border);
}

.bdbt-toggles {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 14px;
    padding: 8px 0;
    margin-bottom: 4px;
}
.bdbt-toggles-label {
    font-size: var(--tk-font-sm);
    font-weight: 400;
    color: var(--tk-text-muted);
    margin-right: 4px;
}

.bdbt-switch { gap: 5px; }
.bdbt-switch .tkn-switch-track {
    width: 28px;
    height: 16px;
}
.bdbt-switch .tkn-switch-thumb {
    width: 12px;
    height: 12px;
    top: 2px;
    left: 2px;
}
.bdbt-switch input:checked + .tkn-switch-track .tkn-switch-thumb {
    transform: translateX(12px);
}
.bdbt-switch .tkn-switch-label {
    font-size: var(--tk-font-sm);
}

@media (max-width: 540px) {
    .bdbt-toggles {
        gap: 4px 10px;
        font-size: var(--tk-font-xs);
    }
    .bdbt-toggles-label { width: 100%; text-align: center; margin-bottom: 4px; }
}

.bdbt-table {
    table-layout: fixed;
}
.bdbt-table th,
.bdbt-table td {
    width: 14.28%;
}
.bdbt-wd-short { display: none; }
@media (max-width: 720px) {
    .bdbt-wd-full  { display: none; }
    .bdbt-wd-short { display: inline; }
}

.bdbt-cell {
    padding: 6px 4px !important;
    vertical-align: middle;
}
.bdbt-empty,
.bdbt-empty.bdbt-weekend {
    background: #E9EAED !important;
}
.bdbt-weekend {
    background: #ecfdf5 !important;
}

.bdbt-num {
    margin: 0 0 2px;
    font-weight: 700;
    white-space: nowrap;
    line-height: 1.2;

    font-size: 0;
    letter-spacing: 0;
}
.bdbt-prefix,
.bdbt-loto {
    font-size: 15px;
    line-height: 1.2;
}
.bdbt-prefix { font-weight: 400; }
.bdbt-loto   { color: var(--tk-danger); }
.bdbt-info {
    margin: 0;
    font-size: 12px;
    color: var(--tk-text);
    line-height: 1.3;
}
.bdbt-info[hidden] { display: none; }

@media (max-width: 720px) {
    .bdbt-year { display: none; }
    .bdbt-prefix,
    .bdbt-loto { font-size: 13px; }
    .bdbt-info { font-size: 11px; }
}

/* ===== Stats phụ dưới bảng tuần ===== */
.bdbt-stats-body { padding: var(--tk-gap, 12px) 0; }
.bdbt-stats-stack {
    display: flex;
    flex-direction: column;
    gap: var(--tk-gap);
}
.bdbt-stat-card { display: flex; flex-direction: column; min-width: 0; }
.bdbt-stat-title {
    text-align: center;
    font-size: var(--tk-font-sm);
    font-weight: 600;
    color: var(--tk-text);
    margin: 0 0 6px;
    line-height: 1.4;
}
.bdbt-stat-em { color: var(--tk-danger); }
.bdbt-stat-loto {
    color: var(--tk-danger);
    font-weight: 700;
}
.bdbt-pair-table td,
.bdbt-digit-table td,
.bdbt-gan-table td,
.bdbt-gan-digit-table td {
    min-width: 0;
    padding: 5px 6px;
    font-size: var(--tk-font-sm);
}
.bdbt-pair-table .bdbt-stat-loto,
.bdbt-digit-table .bdbt-stat-loto,
.bdbt-gan-digit-table .bdbt-stat-loto { font-size: 15px; }
.bdbt-gan-table .bdbt-stat-loto { margin-right: 4px; }
.bdbt-gan-days {
    color: var(--tk-text-muted);
    font-size: var(--tk-font-sm);
}
.bdbt-gan-digit-table th,
.bdbt-gan-digit-table td { text-align: center; }
.bdbt-date-link {
    color: var(--tk-primary-dark);
    text-decoration: none;
}
.bdbt-date-link:hover {
    color: var(--tk-danger);
    text-decoration: underline;
}
.tk-table-wrap:has(> .bdbt-pair-table),
.tk-table-wrap:has(> .bdbt-digit-table),
.tk-table-wrap:has(> .bdbt-gan-table),
.tk-table-wrap:has(> .bdbt-gan-digit-table) { border: 0; border-radius: 0; background: transparent; }

@media (max-width: 720px) {
    .bdbt-pair-table td,
    .bdbt-digit-table td,
    .bdbt-gan-table td,
    .bdbt-gan-digit-table td { padding: 4px 4px; font-size: var(--tk-font-xs); }
    .bdbt-pair-table .bdbt-stat-loto,
    .bdbt-digit-table .bdbt-stat-loto,
    .bdbt-gan-digit-table .bdbt-stat-loto { font-size: 14px; }
}

.bdbm-form-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.bdbm-controls {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    padding: 12px 0;
    margin: 8px 0;
}
.bdbm-controls .bdbt-toggles {
    border-bottom: 0;
    padding: 0;
    margin: 0;
}

.bdbm-zoom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.bdbm-zoom-label {
    font-size: var(--tk-font-sm);
    color: var(--tk-text-muted);
}

.bdbm-zoom-group {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0;
    border-radius: var(--tk-radius-sm);
    overflow: hidden;
}
.bdbm-zoom-group .bdbm-zoom-btn {
    border-radius: 0;
    border-right-width: 0;
}
.bdbm-zoom-group .bdbm-zoom-btn:first-child {
    border-top-left-radius: var(--tk-radius-sm);
    border-bottom-left-radius: var(--tk-radius-sm);
}
.bdbm-zoom-group .bdbm-zoom-btn:last-child {
    border-right-width: 1px;
    border-top-right-radius: var(--tk-radius-sm);
    border-bottom-right-radius: var(--tk-radius-sm);
}
.bdbm-zoom-btn {
    min-width: 52px;
}

.bdbm-table-wrap {
    overflow-x: auto;
}
.bdbm-table {
    transform-origin: top left;
    transition: transform 0.15s ease, width 0.15s ease;
}
.bdbm-table th,
.bdbm-table td {
    padding: 4px 3px;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}
.bdbm-table thead th {
    font-size: var(--tk-font-sm);
}

.bdbm-table tbody td.bdbm-cell {
    min-width: 36px;
    line-height: 1.2;
}
.bdbm-table tbody td.bdbm-year-col {
    min-width: 60px;
    color: var(--tk-primary-dark);
    font-weight: 700;
    background: var(--tk-primary-bg);
}
.bdbm-empty {
    background: #E9EAED !important;
}
.bdbm-sunday {
    background: #ecfdf5 !important;
}

.bdbm-num {
    margin: 0 0 2px;
    font-weight: 700;
    white-space: nowrap;
    line-height: 1.2;
    font-size: 0;
    letter-spacing: 0;
}
.bdbm-prefix,
.bdbm-loto {
    font-size: 15px;
    line-height: 1.2;
}
.bdbm-prefix { font-weight: 400; }
.bdbm-loto   { color: var(--tk-danger); font-weight: 700; }

.bdbm-info {
    margin: 0;
    font-size: 11px;
    color: var(--tk-text);
    line-height: 1.25;
}
.bdbm-info[hidden] { display: none; }

@media (max-width: 720px) {
    .bdbm-form-grid {
        grid-template-columns: 1fr;
    }
    .bdbm-prefix,
    .bdbm-loto { font-size: 12px; }
    .bdbm-info { font-size: 10px; }
    .bdbm-cell { min-width: 30px; }
}

.bdbn-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bdbn-controls {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    padding: 12px 0;
    margin: 8px 0;
}
.bdbn-controls .bdbt-toggles {
    border-bottom: 0;
    padding: 0;
    margin: 0;
}

.bdbn-zoom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.bdbn-zoom-label {
    font-size: var(--tk-font-sm);
    color: var(--tk-text-muted);
}
.bdbn-zoom-group {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0;
    border-radius: var(--tk-radius-sm);
    overflow: hidden;
}
.bdbn-zoom-group .bdbn-zoom-btn {
    border-radius: 0;
    border-right-width: 0;
}
.bdbn-zoom-group .bdbn-zoom-btn:first-child {
    border-top-left-radius: var(--tk-radius-sm);
    border-bottom-left-radius: var(--tk-radius-sm);
}
.bdbn-zoom-group .bdbn-zoom-btn:last-child {
    border-right-width: 1px;
    border-top-right-radius: var(--tk-radius-sm);
    border-bottom-right-radius: var(--tk-radius-sm);
}
.bdbn-zoom-btn {
    min-width: 52px;
}

.bdbn-table-wrap {
    overflow-x: auto;
}
.bdbn-table {
    transform-origin: top left;
    transition: transform 0.15s ease, width 0.15s ease;
}
.bdbn-table th,
.bdbn-table td {
    padding: 4px 3px;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}
.bdbn-table thead th {
    font-size: var(--tk-font-sm);
    min-width: 66px;
}
.bdbn-table tbody td.bdbn-cell {
    min-width: 66px;
    line-height: 1.2;
}
.bdbn-table thead th.bdbn-day-col {
    min-width: 48px;
}
.bdbn-table tbody td.bdbn-day-col {
    min-width: 48px;
    color: var(--tk-primary-dark);
    font-weight: 700;
    background: var(--tk-primary-bg);
}
.bdbn-empty,
.bdbn-invalid {
    background: #E9EAED !important;
}
.bdbn-sunday {
    background: #ecfdf5 !important;
}

.bdbn-th-short { display: none; }
.bdbn-th-full  { display: inline; }

.bdbn-num {
    margin: 0 0 2px;
    font-weight: 700;
    white-space: nowrap;
    line-height: 1.2;
    font-size: 0;
    letter-spacing: 0;
}
.bdbn-prefix,
.bdbn-loto {
    font-size: 15px;
    line-height: 1.2;
}
.bdbn-prefix { font-weight: 400; }
.bdbn-loto   { color: var(--tk-danger); font-weight: 700; }

.bdbn-info {
    margin: 0;
    font-size: 11px;
    color: var(--tk-text);
    line-height: 1.25;
}
.bdbn-info[hidden] { display: none; }

@media (max-width: 1200px) {
    .bdbn-th-short { display: inline; }
    .bdbn-th-full  { display: none; }
    .bdbn-table thead th,
    .bdbn-table tbody td.bdbn-cell { min-width: 48px; }
}

@media (max-width: 720px) {
    .bdbn-form-grid {
        grid-template-columns: 1fr;
    }
    .bdbn-prefix,
    .bdbn-loto { font-size: 12px; }
    .bdbn-info { font-size: 10px; }
    .bdbn-table thead th,
    .bdbn-table tbody td.bdbn-cell { min-width: 38px; }
    .bdbn-table tbody td.bdbn-day-col,
    .bdbn-table thead th.bdbn-day-col { min-width: 32px; }
}

/* ===== Responsive ===== */
@media (max-width: 720px) {
    .tkn-form-grid {
        grid-template-columns: 1fr;
    }
    .tkn-quick { width: 100%; }
    .tkn-form-row {
        justify-content: center;
    }
    .tkn-submit { width: 100%; }
    .tkn-table th,
    .tkn-table tbody td { padding: 6px 4px; }
    .tktn-form-grid { grid-template-columns: 1fr; }
    .tktn-list { line-height: 1.8; }

    .tktsbs-table td      { white-space: normal; }
    .tktsbs-pct {
        display: block;
        margin-left: 0;
        margin-top: 2px;
    }
}

#tsl-form .tkn-form-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tsl-controls {
    margin: var(--tk-gap) 0 calc(var(--tk-gap) / 2);
    display: flex;
    flex-direction: column;
    gap: var(--tk-gap);
}

.tsl-pick-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    text-align: center;
    margin-bottom: var(--tk-gap);
    border: 1px solid #ccc;
    background: #f0f8ff;
}
.tsl-pick-table > tbody > tr > td {
    padding: 4px 2px;
    vertical-align: middle;
    overflow: hidden;
    border-bottom: 1px solid #ddd;
    border-right: 1px solid #ddd;
    background: #fff;
}
.tsl-pick-table > tbody > tr > td.tsl-side-cell { background: #d9edf7; }
.tsl-pick-table > tbody > tr > td:last-child { border-right: 0; }
.tsl-pick-table > tbody > tr:last-child > td { border-bottom: 0; }
.tsl-pills-row > td {
    padding: 8px 4px !important;
    text-align: center;
    overflow: visible;
    background: #d9edf7 !important;
}

/* Pill buttons */
.tsl-pill {
    background: #fff;
    display: inline-block;
    height: 32px;
    line-height: 30px;
    font-size: 12px;
    cursor: pointer;
    text-align: center;
    padding: 0 12px;
    border: 1px solid #c7d8e8;
    color: #333;
    margin: 2px;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.tsl-pill:hover { background: #f3f4f6; }
.tsl-pill.is-active {
    background: #959595;
    border-color: #959595;
    color: #fff;
}
.tsl-pill.is-active:hover { background: #7a7a7a; border-color: #7a7a7a; }

/* Custom checkbox label */
.tsl-cb-label {
    display: block;
    position: relative;
    cursor: pointer;
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    user-select: none;
    color: #333;
}
.tsl-cb-label input[type="checkbox"] {
    position: absolute;
    z-index: -1;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
}
.tsl-cb-indicator {
    height: 16px;
    width: 16px;
    border-radius: 2px;
    border: 1px solid #e0e0e0;
    background: #fff;
    display: inline-block;
    position: relative;
    top: 3px;
    margin-right: 4px;
    box-sizing: border-box;
}
.tsl-cb-label input[type="checkbox"]:checked ~ .tsl-cb-indicator {
    background: #06f;
    border-color: #06f;
}
.tsl-cb-label input[type="checkbox"]:checked ~ .tsl-cb-indicator::after {
    content: '';
    position: absolute;
    display: block;
    left: 5px;
    top: 1px;
    width: 4px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Đầu / Đuôi side cells */
.tsl-side-cell {
    background: #d9edf7;
}
.tsl-side-btn {
    padding: 4px;
    font-size: 12px;
    border: 1px solid #ddd;
    display: inline-block;
    min-width: 100%;
    box-sizing: border-box;
    cursor: pointer;
    background: #fff;
    color: #333;
    transition: background 0.15s;
}
.tsl-side-btn:hover { background: #ddd; }

.tsl-fullscreen-btn {
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 4px;
    color: #4b5563;
    font-size: 14px;
    transition: color 0.15s;
    width: 100%;
}
.tsl-fullscreen-btn:hover { color: #1f2937; }
.tscl-pills-cell { position: relative; }
.tscl-fullscreen-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    font-size: 16px;
}
#tsl-result-wrapper:fullscreen,
#tsl-result-wrapper:-webkit-full-screen,
#tscl-result-wrapper:fullscreen,
#tscl-result-wrapper:-webkit-full-screen {
    background: #fff;
    overflow-y: auto;
    overflow-x: auto;
    padding: 16px;
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
}

.tsl-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    justify-content: center;
    padding: 8px 0;
}
.tsl-view {
    display: flex;
    align-items: center;
}
.tsl-view-select {
    width: auto;
    min-width: 200px;
    height: 32px;
    padding: 0 28px 0 10px;
    font-size: var(--tk-font-sm);
}
.tsl-zoom-btn { height: 32px; }

.tsl-zoom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.tsl-zoom-label {
    font-size: var(--tk-font-sm);
    color: var(--tk-text-muted);
}
.tsl-zoom-group {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0;
    border-radius: var(--tk-radius-sm);
    overflow: hidden;
}
.tsl-zoom-group .tsl-zoom-btn {
    border-radius: 0;
    border-right-width: 0;
    min-width: 52px;
}
.tsl-zoom-group .tsl-zoom-btn:first-child {
    border-top-left-radius: var(--tk-radius-sm);
    border-bottom-left-radius: var(--tk-radius-sm);
}
.tsl-zoom-group .tsl-zoom-btn:last-child {
    border-right-width: 1px;
    border-top-right-radius: var(--tk-radius-sm);
    border-bottom-right-radius: var(--tk-radius-sm);
}

.tsl-tables { margin-top: var(--tk-gap); }
.tsl-scroll {
    overflow-x: auto;
    width: 100%;
}
.tsl-scroll > .tsl-table {
    transform-origin: top left;
    border-collapse: separate;
    border-spacing: 1px;
    background: #666;
    margin: 0;
    transition: transform 0.15s ease, width 0.15s ease;
}
.tsl-table th,
.tsl-table td {
    padding: 4px;
    text-align: center;
    font-size: 15px;
    white-space: nowrap;
    background: #808080;
    color: #000;
    line-height: 1.2;
    min-width: 28px;
    height: 32px;
    border: 0;
}
.tsl-table thead th,
.tsl-table tbody th,
.tsl-table tbody tr > td:first-child {
    background: #d9edf7;
    font-weight: 600;
    line-height: 1.4;
}
.tsl-table tbody tr > td:first-child,
.tsl-table thead th:first-child {
    color: #000;
}
.tsl-table tbody tr > td:first-child,
.tsl-table thead th:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
}
.tsl-table thead th:first-child { z-index: 2; }

/* Row hover & selected highlight (horizontal view) */
.tsl-hor tbody tr { cursor: pointer; }
.tsl-hor tbody tr:hover > td:first-child,
.tsl-hor tbody tr:hover > td.tsl-y,
.tsl-hor tbody tr:hover > td.tsl-db,
.tsl-hor tbody tr:hover > td.tsl-total {
    background: #ffeaa6;
}
.tsl-hor tbody tr.is-selected > td:first-child,
.tsl-hor tbody tr.is-selected > td.tsl-y,
.tsl-hor tbody tr.is-selected > td.tsl-db,
.tsl-hor tbody tr.is-selected > td.tsl-total {
    background: #ffbf00;
}

.tsl-ver tbody tr { cursor: default; }
.tsl-ver [data-num].is-col-hover,
.tsl-ver [data-pair].is-col-hover {
    background: #ffeaa6 !important;
}
.tsl-ver [data-num].is-col-selected,
.tsl-ver [data-pair].is-col-selected {
    background: #ffbf00 !important;
}
.tsl-ver thead th[data-num] { cursor: pointer; }
.tsl-ver tbody td[data-num] { cursor: pointer; }
.tsl-table .tsl-y {
    background: #fff;
    color: #000;
    font-weight: 700;
}
.tsl-table .tsl-db {
    background: #fff;
    color: var(--soicau-danger, #dc2626);
    font-weight: 700;
}
.tsl-table .tsl-total {
    background: #d9edf7;
    color: #000;
    font-weight: 600;
}
.tsl-totals-row td,
.tsl-bottom-head td {
    background: #d9edf7 !important;
    color: #000 !important;
    font-weight: 600 !important;
}

@media (max-width: 720px) {

    #tsl-form .tkn-form-grid {
        grid-template-columns: 1fr 1fr;
    }
    #tsl-form .tkn-form-grid > .tk-form-field:first-child {
        grid-column: 1 / -1;
    }
    #tsl-form .tkn-submit { width: 100%; }

    .tsl-pill { padding: 0 12px; font-size: 12px; }
    .tsl-toolbar { flex-direction: column; align-items: stretch; gap: 10px; }
    .tsl-view { justify-content: center; }
    .tsl-view-select { width: 100%; min-width: 0; }
    .tsl-zoom { justify-content: center; }
    .tsl-zoom-group { width: 100%; }
    .tsl-zoom-group .tsl-zoom-btn { flex: 1 1 0; min-width: 0; }

    .tsl-pick-table > tbody > tr > td { padding: 4px 2px; }
    .tsl-cb-label {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        font-size: 13px;
    }
    .tsl-cb-indicator {
        margin-right: 0;
        top: 0;
    }
    .tsl-side-btn { font-size: 11px; padding: 4px 2px; }

    .tscl-pair-text {
        display: flex;
        flex-direction: column;
        align-items: center;
        line-height: 1.1;
    }
    .tscl-pair-sep { display: none; }
}

#tkgdb-form .tkn-form-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.tkgdb-de {
    color: #d6336c;
    font-weight: 700;
}

#tkgdb-section thead .tkgdb-de {
    color: inherit;
}
.tkgdb-explain {
    text-align: center;
    margin: 0 0 12px;
    font-size: 14px;
    color: #444;
}
.tkgdb-alert {
    margin: 12px 0;
    padding: 10px 14px;
    background: #fff8e1;
    border: 1px solid #f6c453;
    border-radius: 6px;
    color: #6b4500;
    text-align: center;
}
.tkgdb-mb { margin-bottom: 8px; }
.tkgdb-table th,
.tkgdb-table td,
.tkgdb-freq-table th,
.tkgdb-freq-table td {
    text-align: center;
}
.tkgdb-freq-table td { padding: 6px 4px; }

.tkdd-block {
    margin-bottom: 12px;
    border-radius: var(--tk-radius-sm);
    background: var(--tk-bg);
    overflow: hidden;
}
.tkdd-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: var(--tk-font-sm);
}
.tkdd-table col.tkdd-col-date { width: 22%; }
.tkdd-table th,
.tkdd-table td {
    text-align: center;
    padding: 6px 2px;
    vertical-align: middle;
    border: 1px solid var(--tk-border);
    overflow: hidden;
    text-overflow: ellipsis;
}
.tkdd-thead-title {
    background: var(--tk-primary, #17a2b8);
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    padding: 8px 6px;
    border-bottom: 0;
}
.tkdd-table thead tr:nth-child(2) th {
    background: #f1f7f8;
    color: #0c5460;
    font-weight: 600;
    white-space: nowrap;
}
.tkdd-kind { font-weight: 700; }
.tkdd-cell-date { white-space: nowrap; }
.tkdd-cell-max {
    background: #d4edda;
    color: #155724;
    font-weight: 700;
}
.tkdd-unit { color: #6c757d; font-size: 0.85em; }

@media (max-width: 767px) {
    .tkdd-table { font-size: 0.78rem; }
    .tkdd-table th,
    .tkdd-table td { padding: 5px 1px; }
    .tkdd-table col.tkdd-col-date { width: 20%; }
    .tkdd-thead-title { font-size: 0.92rem; padding: 6px 4px; }
    .tkdd-label { display: none; }
    .tkdd-unit { display: none; }
}
@media (max-width: 480px) {
    .tkdd-table { font-size: 0.72rem; }
    .tkdd-table th,
    .tkdd-table td { padding: 4px 0; }
    .tkdd-table col.tkdd-col-date { width: 18%; }
    .tkdd-year { display: none; }
}

.tkckdl-numbers-field { margin-top: 8px; }
.tkckdl-numbers-field textarea {
    resize: vertical;
    min-height: 64px;
}
.tkckdl-numbers-line {
    margin-top: 4px;
    word-break: break-word;
}
.tkckdl-numbers {
    color: var(--soicau-danger, #dc3545);
    font-weight: 700;
}
.tkckdl-summary {
    margin: 12px 0;
    padding: 10px 12px;
    background: #f8f9fa;
    border-radius: 4px;
    line-height: 1.6;
}
.tkckdl-summary p { margin: 0 0 6px; }
.tkckdl-summary p:last-child { margin-bottom: 0; }
.tkckdl-empty { color: #6c757d; text-align: center; }
.tkckdl-hl { color: var(--soicau-danger, #dc3545); }
.tkckdl-hint {
    text-align: center;
    color: #6c757d;
    font-style: italic;
    font-weight: 400;
    font-size: 0.85rem;
    padding: 8px 4px;
}
.tkckdl-table { width: 100%; }
.tkckdl-table th,
.tkckdl-table td { text-align: center; vertical-align: middle; }
.tkckdl-first { color: #6c757d; font-style: italic; }

@media (max-width: 575px) {
    .tkckdl-summary { font-size: 0.9rem; padding: 8px 10px; }
    .tkckdl-hint { font-size: 0.8rem; }
    .tkckdl-table th,
    .tkckdl-table td { padding: 6px 4px; font-size: 0.85rem; }
}

.tkckddb-numbers-field { margin-top: 8px; }
.tkckddb-numbers-field textarea {
    resize: vertical;
    min-height: 64px;
}
.tkckddb-numbers-line {
    margin-top: 4px;
    word-break: break-word;
}
.tkckddb-numbers {
    color: var(--soicau-danger, #dc3545);
    font-weight: 700;
}
.tkckddb-summary {
    margin: 12px 0;
    padding: 10px 12px;
    background: #f8f9fa;
    border-radius: 4px;
    line-height: 1.6;
}
.tkckddb-summary p { margin: 0 0 6px; }
.tkckddb-summary p:last-child { margin-bottom: 0; }
.tkckddb-empty { color: #6c757d; text-align: center; }
.tkckddb-hl { color: var(--soicau-danger, #dc3545); }
.tkckddb-hit { color: var(--soicau-danger, #dc3545); font-weight: 700; }
.tkckddb-hint {
    text-align: center;
    color: #6c757d;
    font-style: italic;
    font-weight: 400;
    font-size: 0.85rem;
    padding: 8px 4px;
}
.tkckddb-table { width: 100%; }
.tkckddb-table th,
.tkckddb-table td { text-align: center; vertical-align: middle; }
.tkckddb-first { color: #6c757d; font-style: italic; }

@media (max-width: 575px) {
    .tkckddb-summary { font-size: 0.9rem; padding: 8px 10px; }
    .tkckddb-hint { font-size: 0.8rem; }
    .tkckddb-table th,
    .tkckddb-table td { padding: 6px 4px; font-size: 0.85rem; }
}

#tltl-form .tkn-form-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.tltl-numbers-field { margin-top: 8px; }
.tltl-numbers-field textarea {
    resize: vertical;
    min-height: 64px;
}
.tltl-numbers-line {
    margin-top: 4px;
    word-break: break-word;
}
.tltl-numbers {
    color: var(--soicau-danger, #dc3545);
    font-weight: 700;
}
.tltl-mode { color: var(--tk-text-muted); margin-left: 4px; }
.tltl-hint {
    text-align: center;
    color: #6c757d;
    font-style: italic;
    font-weight: 400;
    font-size: 0.85rem;
    padding: 8px 4px;
}
.tltl-hits-row th { background: #d9edf7 !important; color: #000; font-weight: 700; }
.tsl-ver tbody td.tltl-hits-cell { background: #d9edf7; color: #000; font-weight: 700; }
.tltl-hits-cell { font-size: 13px; line-height: 1.3; white-space: normal !important; }
.tltl-hits-cell sup { color: var(--soicau-danger, #dc3545); }

@media (max-width: 720px) {
    #tltl-form .tkn-form-grid {
        grid-template-columns: 1fr 1fr;
    }
    #tltl-form .tkn-form-grid > .tk-form-field:first-child {
        grid-column: 1 / -1;
    }
}
@media (max-width: 575px) {
    .tltl-hint { font-size: 0.8rem; }
}

#tltdb-form .tkn-form-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.tltdb-numbers-field { margin-top: 8px; }
.tltdb-numbers-field textarea {
    resize: vertical;
    min-height: 64px;
}
.tltdb-numbers-line {
    margin-top: 4px;
    word-break: break-word;
}
.tltdb-numbers {
    color: var(--soicau-danger, #dc3545);
    font-weight: 700;
}
.tltdb-hint {
    text-align: center;
    color: #6c757d;
    font-style: italic;
    font-weight: 400;
    font-size: 0.85rem;
    padding: 8px 4px;
}
.tltdb-db-row th { background: #d9edf7 !important; color: #000; font-weight: 700; }
.tsl-ver tbody td.tltdb-db-cell { background: #d9edf7; color: #000; font-weight: 700; }
.tltdb-db-cell { font-size: 13px; line-height: 1.3; }

@media (max-width: 720px) {
    #tltdb-form .tkn-form-grid {
        grid-template-columns: 1fr 1fr;
    }
    #tltdb-form .tkn-form-grid > .tk-form-field:first-child {
        grid-column: 1 / -1;
    }
}
@media (max-width: 575px) {
    .tltdb-hint { font-size: 0.8rem; }
}

.tstc-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.tstc-customset-field { margin-top: 8px; }
.tstc-customset-field textarea {
    resize: vertical;
    min-height: 80px;
}
.tstc-mode {
    color: var(--soicau-danger, #dc3545);
    font-weight: 700;
}
.tstc-hint {
    text-align: center;
    color: #6c757d;
    font-style: italic;
    font-weight: 400;
    font-size: 0.85rem;
    padding: 8px 4px;
}
.tstc-alert {
    margin: 8px 0;
    padding: 10px 12px;
    border-radius: 4px;
    font-size: 0.9rem;
}
.tstc-alert-error {
    background: #f8d7da;
    border: 1px solid #f5c2c7;
    color: #842029;
}

.tstc-target-row th { background: #d9edf7 !important; color: #000; font-weight: 700; }
.tsl-ver tbody td.tstc-target-cell { background: #d9edf7; color: #000; font-weight: 700; }
.tstc-target-cell { font-size: 13px; line-height: 1.3; white-space: normal !important; max-width: 200px; }

.tstc-prov-row th { background: #d9edf7 !important; color: #000; font-weight: 700; font-size: 12px; }
.tstc-prov-inline { color: inherit; font-weight: 700; font-size: 11px; }

.tstc-fullscreen-btn {
    background: transparent;
    border: 1px solid #ddd;
    cursor: pointer;
    padding: 6px 10px;
    color: #4b5563;
    font-size: 14px;
    border-radius: var(--tk-radius-sm);
    transition: color 0.15s, background 0.15s;
}
.tstc-fullscreen-btn:hover { color: #1f2937; background: #f3f4f6; }

#tstc-result-wrapper:fullscreen,
#tstc-result-wrapper:-webkit-full-screen {
    background: #fff;
    overflow-y: auto;
    overflow-x: auto;
    padding: 16px;
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
}

.tstc-table .tsl-y {
    background: #fff;
    font-weight: 700;
}

.tstc-dans-list {
    margin-top: 16px;
    border-top: 1px solid var(--tk-border);
    padding-top: 12px;
}
.tstc-dans-list-title {
    background: var(--soicau-danger, #dc3545);
    color: #fff;
    padding: 8px 12px;
    border-radius: 4px 4px 0 0;
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
}
.tstc-dans-items {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--tk-border);
    border-top: 0;
    border-radius: 0 0 4px 4px;
    background: #fff;
}
.tstc-dan-item {
    padding: 8px 12px;
    border-bottom: 1px solid var(--tk-border);
    font-size: 0.9rem;
    word-break: break-all;
    transition: background 0.3s ease;
}
.tstc-dan-item:last-child { border-bottom: 0; }
.tstc-dan-label { color: var(--soicau-danger, #dc3545); font-weight: 700; margin-right: 6px; }
.tstc-dan-nums { color: var(--tk-text); }
.tstc-dan-highlight { background: #fff3cd !important; }

.tstc-dan-anchor {
    color: inherit;
    text-decoration: none;
}
.tstc-dan-anchor:hover { text-decoration: underline; }

@media (max-width: 720px) {
    .tstc-form-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 575px) {
    .tstc-hint { font-size: 0.8rem; }
}

.tsltm-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

#tsltm-result-wrapper:fullscreen,
#tsltm-result-wrapper:-webkit-full-screen {
    background: #fff;
    overflow-y: auto;
    overflow-x: auto;
    padding: 16px;
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
}

@media (max-width: 720px) {
    .tsltm-form-grid {
        grid-template-columns: 1fr;
    }
}

.tkth-form-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}
.tkth-form-grid > .tk-form-field {
    grid-column: span 2;
}

.tkth-form-grid > .tk-form-field:nth-child(4),
.tkth-form-grid > .tk-form-field:nth-child(5) {
    grid-column: span 3;
}
.tkth-table { width: 100%; }
.tkth-table th,
.tkth-table td {
    text-align: center;
    vertical-align: middle;
}
.tkth-bo {
    color: var(--soicau-danger, #dc3545);
    font-weight: 700;
}
.tkth-fresh { color: #198754; font-weight: 600; }
.tkth-missed { color: inherit; font-weight: 400; }
.tkth-empty { color: #6c757d; font-style: italic; padding: 16px 4px; }
.tkth-sp-tag { color: var(--soicau-danger, #dc3545); font-weight: 700; }

@media (max-width: 720px) {
    .tkth-form-grid {
        grid-template-columns: 1fr;
    }
    .tkth-form-grid > .tk-form-field,
    .tkth-form-grid > .tk-form-field:nth-child(4),
    .tkth-form-grid > .tk-form-field:nth-child(5) {
        grid-column: 1 / -1;
    }
}
@media (max-width: 575px) {
    .tkth-table th,
    .tkth-table td { padding: 6px 4px; font-size: 0.85rem; }
}

#tkn-form .tk-form-grid,
#tkqt-form .tk-form-grid,
#tsl-form .tk-form-grid,
#tscl-form .tk-form-grid,
#tsn-form .tk-form-grid,
#tkgdb-form .tk-form-grid,
#tltl-form .tk-form-grid,
#tltdb-form .tk-form-grid,
#bdbt-form .tk-form-grid,
#bdbm-form .tk-form-grid,
#bdbn-form .tk-form-grid,
#tkth-form .sc-form-grid,
#tktt-form .sc-form-grid {
    grid-template-columns: 1fr;
}

@media (max-width: 720px) {
    #tsl-form .tkn-form-grid > .tk-form-field:first-child,
    #tltl-form .tkn-form-grid > .tk-form-field:first-child,
    #tltdb-form .tkn-form-grid > .tk-form-field:first-child {
        grid-column: auto;
    }
}