/* Giao diện Book vận chuyển V2 – dùng chung cho Book xe tải / container / sà lan */

/* ===== BOOK CONT – bố cục theo trang Kế hoạch tháng ===== */
.bkc3,
.bkc3-drawer {
    --rz-input-height: 31.5px;
    --brand: #EA6224;
    --brand-bg: #FDF0E9;
    --red: #D6453A;
    --red-bg: #FDF0EF;
    --green: #2E7D53;
    --blue: #1d4ed8;
    --ink: #20262E;
    --ink-2: #5B6472;
    --ink-3: #98A1AE;
    --line: #E8EBF0;
    --line-soft: #F1F3F7;
    --bg: #F7F8FA;
    --card: #FFFFFF;
    --mono: 'JetBrains Mono', 'Cascadia Mono', Consolas, ui-monospace, monospace;
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    color: var(--ink);
}

.bkc3 {
    position: fixed;
    top: calc(50px + var(--etp-strip-h, 0px));
    left: var(--sidebar-width);
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    background: #F7F8FA;
    transition: left 0.3s ease;
    --rz-input-height: 31.5px;
    --brand: #EA6224;
    --brand-bg: #FDF0E9;
    --red: #D6453A;
    --red-bg: #FDF0EF;
    --amber: #A9761B;
    --amber-bg: #FBF4E4;
    --green: #2E7D53;
    --green-bg: #EDF6F1;
    --blue: #1d4ed8;
    --blue-bg: #eff6ff;
    --ink: #20262E;
    --ink-2: #5B6472;
    --ink-3: #98A1AE;
    --line: #E8EBF0;
    --line-soft: #F1F3F7;
    --bg: #F7F8FA;
    --card: #FFFFFF;
    --mono: 'JetBrains Mono', 'Cascadia Mono', Consolas, ui-monospace, monospace;
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 11.7px;
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
}

.sidebar-collapsed .bkc3 {
    left: var(--sidebar-collapsed-width);
}

.bkc3:has(.qb-dr) {
    z-index: 1046;
}

.bkc3-tabs {
    display: flex;
    background: #fff;
    border-bottom: 1px solid var(--border-light, #E8EBF0);
    flex: none;
}

.bkc3-tab {
    flex: 1;
    padding: 0.2rem;
    background: none;
    border: none;
    font-size: var(--font-size-base, 13px);
    color: var(--text-muted, #6b7280);
    cursor: default;
    position: relative;
    white-space: nowrap;
}

.bkc3-tab.active {
    color: var(--primary-color, #CA3C19);
    font-weight: 600;
    background: rgba(202, 60, 25, 0.08);
}

.bkc3-tab.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-color, #CA3C19), var(--primary-light, #EA6224));
    border-radius: 2px 2px 0 0;
}

.bkc3-page {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-bottom: 9px;
}

.bkc3-deck {
    flex: none;
    background: var(--card);
    padding: 9px 14.6px 6.8px;
    border-bottom: 1px solid var(--line);
}

.bkc3-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 6.8px 9px;
    margin-bottom: 6.8px;
}

.bkc3 .filter-group {
    flex: 1 1 135px;
    max-width: 213.8px;
    min-width: 117px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.bkc3 .bkc3-seg-group {
    flex: none;
    max-width: none;
    min-width: 0;
}

.bkc3 .filter-label {
    font-size: 10.1px;
    font-weight: 500;
    color: var(--ink-3);
    margin: 0 0 2.2px 0;
    white-space: nowrap;
    cursor: default;
}

.bkc3-seg {
    display: inline-flex;
    border: 1px solid var(--line);
    border-radius: 6.8px;
    overflow: hidden;
    background: #fff;
    height: var(--rz-input-height);
}

.bkc3-seg button {
    border: 0;
    background: transparent;
    padding: 0 12.4px;
    font-weight: 600;
    font-size: 11.2px;
    color: var(--ink-3);
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    height: 100%;
}

.bkc3-seg button + button {
    border-left: 1px solid var(--line-soft);
}

.bkc3-seg button.on {
    background: var(--brand-bg);
    color: var(--brand);
}

.bkc3 .bkc3-radio {
    display: inline-flex;
    align-items: center;
    gap: 13.5px;
    height: var(--rz-input-height);
    padding: 0 11.2px;
    border: 1px solid var(--line);
    border-radius: 6.8px;
    background: #fff;
    flex-wrap: nowrap;
}

.bkc3 .bkc3-radio .rz-radio-button-list-item,
.bkc3 .bkc3-radio > div {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    cursor: pointer;
}

.bkc3 .bkc3-radio .rz-radiobutton-label {
    margin: 0;
    font-size: 11.2px;
    font-weight: 600;
    color: var(--ink-3);
    white-space: nowrap;
    cursor: pointer;
}

.bkc3 .bkc3-radio .rz-radiobutton-box {
    width: 14px;
    height: 14px;
    border-color: #C9CFD8;
    box-shadow: none;
}

.bkc3 .bkc3-radio .rz-radiobutton-box.rz-state-active {
    border-color: var(--brand);
    background: #fff;
}

.bkc3 .bkc3-radio .rz-radiobutton-box.rz-state-active .rz-radiobutton-icon {
    background: var(--brand);
}

.bkc3 .bkc3-radio .rz-radiobutton-box.rz-state-active + .rz-radiobutton-label,
.bkc3 .bkc3-radio .rz-radiobutton:has(.rz-state-active) + .rz-radiobutton-label {
    color: var(--brand);
}

.bkc3 .filter-group .rz-dropdown,
.bkc3 .filter-group .rz-dropdown-datagrid,
.bkc3 .filter-group .rz-multiselect,
.bkc3 .filter-group .rz-numeric,
.bkc3 .filter-group .rz-datepicker,
.bkc3 .filter-group .rz-textbox {
    width: 100% !important;
    max-width: 100%;
    min-width: 0 !important;
    box-sizing: border-box;
}

.bkc3 .filter-group .rz-dropdown-label,
.bkc3 .filter-group .rz-dropdown .rz-inputtext,
.bkc3 .filter-group .rz-numeric .rz-inputtext {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bkc3-deck .rz-dropdown,
.bkc3-deck .rz-textbox,
.bkc3-deck .rz-numeric,
.bkc3-deck .rz-datepicker .rz-inputtext,
.bkc3-deck .rz-multiselect,
.bkc3-deck .rz-dropdown-datagrid,
.bkc3-deck .rz-lookup,
.bkc3-deck .filter-input,
.bkc3-deck .filter-select,
.bkc3-drawer .rz-dropdown,
.bkc3-drawer .rz-numeric {
    border: 1px solid var(--line) !important;
    border-radius: 6.8px !important;
    background: #fff !important;
    color: var(--ink-2) !important;
    font-size: 11.2px !important;
    box-shadow: none !important;
    min-height: var(--rz-input-height);
    height: var(--rz-input-height);
}

.bkc3-deck .rz-dropdown:hover,
.bkc3-deck .rz-numeric:hover,
.bkc3-deck .rz-datepicker .rz-inputtext:hover {
    border-color: #D3D8E0 !important;
}

.bkc3-deck .rz-dropdown.rz-state-focused,
.bkc3-deck .rz-numeric.rz-state-focused,
.bkc3-deck .rz-datepicker .rz-inputtext:focus,
.bkc3-drawer .rz-dropdown.rz-state-focused {
    border-color: var(--brand) !important;
    box-shadow: 0 0 0 3.4px var(--brand-bg) !important;
}

.bkc3-actions {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 2.2px;
    flex-wrap: wrap;
}

.bkc3-edit {
    display: flex;
    align-items: center;
    gap: 6.8px;
    flex-wrap: wrap;
}

.bkc3-push {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6.8px;
    flex-wrap: wrap;
}

.bkc3-btn-search,
.bkc3-btn-ghost {
    border-radius: 6.8px;
    padding: 0 11px;
    height: 28px;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    transition: background .15s ease;
}

.bkc3-btn-search {
    min-width: 0;
    background: var(--brand);
    color: #fff;
    border: 1px solid var(--brand);
}

.bkc3-btn-search:hover {
    background: #DE531B;
}

.bkc3-btn-ghost {
    background: #fff;
    color: var(--ink-2);
    border: 1px solid var(--line);
    font-weight: 500;
}

.bkc3-btn-ghost:hover {
    background: var(--bg);
}

.bkc3-btn-ghost.bkc3-brand {
    color: var(--brand);
    border-color: #F5C7B0;
    font-weight: 600;
}

.bkc3-btn-ghost.bkc3-brand:hover {
    background: var(--brand-bg);
}

.bkc3-btn-ghost.bkc3-danger {
    color: var(--red);
    border-color: #F3C9C5;
}

.bkc3-btn-ghost.bkc3-danger:hover {
    background: var(--red-bg);
}

.bkc3-badge {
    display: inline-block;
    margin-left: 5px;
    background: var(--brand);
    color: #fff;
    border-radius: 10px;
    padding: 0 6px;
    font-size: 10.5px;
    line-height: 16px;
    font-weight: 700;
    font-family: var(--mono);
}

.bkc3-strip {
    display: flex;
    align-items: center;
    gap: 6.8px;
    flex-wrap: wrap;
}

.bkc3-counter {
    display: inline-flex;
    align-items: baseline;
    gap: 5.4px;
    padding: 5.4px 10.8px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 10.8px;
    cursor: pointer;
    background: #fff;
    border: 1px solid var(--line);
    color: var(--ink-2);
    user-select: none;
    white-space: nowrap;
    transition: background .15s ease, border-color .15s ease;
}

.bkc3-counter .n {
    font-family: var(--mono);
    font-weight: 600;
}

.bkc3-counter.gray .n { color: var(--ink); }
.bkc3-counter.blue .n { color: var(--blue); }
.bkc3-counter.green .n { color: var(--green); }
.bkc3-counter.red .n { color: var(--red); }
.bkc3-counter.amber .n { color: var(--amber); }

.bkc3-counter.gray.on {
    border-color: var(--ink-2);
    color: var(--ink);
    background: var(--line-soft);
}

.bkc3-counter.blue.on {
    border-color: var(--blue);
    color: var(--blue);
    background: var(--blue-bg);
}

.bkc3-counter.green.on {
    border-color: var(--green);
    color: var(--green);
    background: var(--green-bg);
}

.bkc3-counter.red.on {
    border-color: var(--red);
    color: var(--red);
    background: var(--red-bg);
}

.bkc3-counter.amber.on {
    border-color: var(--amber);
    color: var(--amber);
    background: var(--amber-bg);
}

.bkc3-hint {
    font-size: 10.3px;
    color: var(--ink-3);
    margin-left: 3.6px;
}

/* ===== DRAWER (theo Bảng làm hàng) ===== */
.bkc3-scrim {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .25);
    z-index: 1300;
}

.bkc3-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 400px;
    max-width: 100vw;
    background: #fff;
    box-shadow: -8px 0 28px rgba(15, 23, 42, .18);
    display: flex;
    flex-direction: column;
    z-index: 1301;
    font-size: 11.5px;
}

.bkc3-drawer .dh {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
}

.bkc3-drawer .dh .t {
    font-weight: 700;
    font-size: 12.5px;
}

.bkc3-drawer .dh .sp {
    flex: 1;
}

.bkc3-drawer .flink {
    font-size: 11px;
    color: var(--brand);
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}

.bkc3-drawer .flink:hover {
    text-decoration: underline;
}

.bkc3-drawer .xbtn {
    border: 0;
    background: transparent;
    padding: 4px 6px;
    color: var(--ink-3);
    font-size: 14px;
    line-height: 1;
}

.bkc3-drawer .xbtn:hover {
    color: var(--ink);
}

.bkc3-drawer .body {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow: auto;
    flex: 1;
}

.bkc3-drawer .dl {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 6px;
}

.bkc3-drawer .two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.bkc3-drawer .df {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--line);
}

/* ===== GRID ===== */
.bkc3-grid-wrap {
    flex: 1 1 auto;
    min-height: 0;
    margin: 9px 13.5px 0;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 11.2px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.bkc3-grid-wrap .rz-data-grid {
    flex: 1 1 auto;
    min-height: 0;
    height: auto !important;
    display: flex;
    flex-direction: column;
    border: 0;
    border-radius: 9px;
    background: var(--card);
    font-family: inherit;
}

.bkc3-grid-wrap .rz-data-grid-data,
.bkc3-grid-wrap .rz-datatable-data {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

.bkc3-grid-wrap .rz-data-grid-header {
    flex: none;
    background: var(--card);
    border-bottom: 1px solid var(--line);
    padding: 7.2px 10.8px;
}

.bkc3-grid-wrap .rz-grid-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #FAFBFC;
    padding: 8px 10.8px;
    border-bottom: 1px solid var(--line);
    border-right: 1px solid var(--line);
    white-space: nowrap;
}

.bkc3-grid-wrap .rz-grid-table thead th .rz-sortable-column-icon {
    color: var(--brand);
}

.bkc3-grid-wrap .rz-grid-table tbody td {
    padding: 8px 10.8px;
    border-bottom: 1px solid var(--line-soft);
    font-size: 11.2px;
    color: var(--ink);
}

.bkc3-grid-wrap .rz-paginator,
.bkc3-grid-wrap .rz-pager {
    flex: none;
    background: var(--card);
    border-top: 1px solid var(--line);
    color: var(--ink-3);
    font-size: 10.8px;
    padding: 7.2px 14.4px;
}

@media (max-width: 768px) {
    .bkc3 {
        position: relative;
        top: 0;
        left: 0;
        min-height: calc(100vh - var(--etp-strip-h, 0px) - 50px);
    }

    .bkc3-grid-wrap {
        min-height: 70vh;
    }

    .bkc3 .filter-group {
        max-width: none;
        flex: 1 1 45%;
    }
}

.bkc3-drawer .rz-numeric {
    width: 100% !important;
}

.bkc3-drawer .rz-numeric .rz-numeric-input,
.bkc3-drawer .rz-numeric .rz-inputtext {
    height: 100%;
    padding: 0 10px !important;
    border: 0 !important;
    font-size: 11.2px;
}

.bkc3-drawer .df .bkc3-btn-search,
.bkc3-drawer .df .bkc3-btn-ghost {
    min-width: 88px;
}

.bkc3-filter-btns {
    display: flex;
    align-items: flex-end;
    gap: 6.8px;
    margin-left: auto;
}

.bkc3-deck .bkc3-actions {
    border-top: 1px solid var(--line-soft);
    padding-top: 6.8px;
    margin-top: 0;
    justify-content: space-between;
}

.bkc3-kpis {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.bkc3-kpi-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.bkc3-kpi-label {
    font-size: 10.1px;
    font-weight: 600;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-right: 2px;
}

.bkc3-vsep {
    width: 1px;
    align-self: stretch;
    min-height: 20px;
    background: var(--line);
}

.bkc3-hint b {
    color: var(--ink);
    font-family: var(--mono);
}

.bkc3-toolbar {
    display: flex;
    align-items: center;
    gap: 6.8px;
    flex-wrap: wrap;
    margin-left: auto;
}

.bkc3-btn-search i,
.bkc3-btn-ghost i {
    font-size: 11px;
}

/* ===== Ô bảng ===== */
.bkc2-trips {
    color: #9ca3af;
    font-size: 11px;
    text-decoration: none;
}

.bkc2-trips:hover {
    color: #1d4ed8;
}

.bkc2-link-sm {
    color: #1d4ed8;
    font-size: 11px;
    text-decoration: none;
}

.bkc2-link-sm:hover {
    text-decoration: underline;
}

.bkc2-grid .rz-grid-table thead th .rz-column-title,
.bkc2-grid .rz-grid-table thead th .rz-column-title-content,
.bkc2-th,
.bkc2-th small {
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
}

.bkc2-grid .rz-column-title {
    justify-content: flex-start;
}

.bkc2-grid .rz-grid-table thead th {
    background: #f9fafb;
    vertical-align: bottom;
}

.bkc2-grid .rz-grid-table td {
    vertical-align: top;
}

.bkc2-grid .rz-cell-data {
    white-space: normal;
}

.bkc2-th {
    font-size: 10.5px;
    font-weight: 600;
    color: #374151;
    line-height: 1.3;
    white-space: normal;
    text-align: left;
}

.bkc2-th small {
    display: block;
    color: #9ca3af;
    font-weight: 400;
}

.bkc2-idline {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.bkc2-id {
    font-weight: 600;
    color: #1d4ed8;
    text-decoration: none;
    cursor: pointer;
}

.bkc2-id:hover {
    text-decoration: underline;
}

.bkc2-groupbadge {
    background: #6366f1;
    color: #fff;
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 4px;
    cursor: pointer;
    user-select: none;
}

.bkc2-childmark {
    color: #9b8fd8;
    font-size: 11px;
}

.bkc2-strong {
    font-weight: 500;
}

.bkc2-wrap {
    white-space: normal;
    word-break: break-word;
}

.bkc2-sub {
    color: #6b7280;
    font-size: 10.8px;
    margin-top: 2px;
}

.bkc2-muted {
    color: #9ca3af;
}

.bkc2-num {
    font-variant-numeric: tabular-nums;
}

.bkc2-mt4 {
    margin-top: 4px;
}

.bkc2-chip {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 500;
    border: 1px solid #e5e7eb;
    background: #f3f4f6;
    color: #374151;
    white-space: nowrap;
}

.bkc2-chip.indigo {
    background: #eef2ff;
    color: #3730a3;
    border-color: #c7d2fe;
}

.bkc2-chip.orange {
    background: #fff7ed;
    color: #c2410c;
    border-color: #fed7aa;
}

.bkc2-chip.red {
    background: #fef2f2;
    color: #b91c1c;
    border-color: #fecaca;
}

.bkc2-chip.empty {
    color: #9ca3af;
    background: #fff;
}

.bkc2-link {
    cursor: pointer;
}

.bkc2-link:hover {
    text-decoration: underline;
}

.bkc2-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.bkc2-chips-col {
    flex-direction: column;
    align-items: flex-start;
}

.bkc2-dash {
    color: #d1d5db;
}

.bkc2-kl {
    display: flex;
    justify-content: space-between;
    gap: 6px;
    font-size: 10.8px;
    color: #6b7280;
    font-variant-numeric: tabular-nums;
}

.bkc2-kl b {
    color: #111827;
}

.bkc2-bar {
    position: relative;
    height: 8px;
    margin-top: 6px;
    border-radius: 999px;
    background: #e5e7eb;
    overflow: hidden;
}

.bkc2-bar i {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    border-radius: 999px;
}

.bkc2-c-blue { color: #1d4ed8 !important; }
.bkc2-c-teal { color: #0f766e !important; }
.bkc2-c-orange { color: #c2410c !important; }
.bkc2-c-green { color: #047857 !important; }

/* ===== POPUP BOOK VẬN TẢI (theo Mockup_Book_Cont_v1 (2)) ===== */
.bkm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(17, 24, 39, .45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.bkm {
    width: 1584px;
    max-width: 96vw;
    height: 940px;
    max-height: 94vh;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 24px 64px rgba(17, 24, 39, .35);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 12.5px;
    color: #111827;
}

.bkm-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 24px;
    border-bottom: 1px solid #e5e7eb;
    flex: none;
}

.bkm-title {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.bkm-title h2 {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
}

.bkm-x {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid #d1d5db;
    background: #fff;
    color: #374151;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.bkm-x:hover {
    background: #f9fafb;
}

.bkm-body {
    display: flex;
    flex: 1;
    min-height: 0;
}

.bkm-pane-l {
    width: 45%;
    min-width: 480px;
    max-width: 680px;
    flex: none;
    background: #f9fafb;
    border-right: 1px solid #e5e7eb;
    padding: 18px 22px;
    overflow: auto;
}

.bkm-pane-r {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.bkm-scroll {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 18px 22px;
}

.bkm-foot {
    flex: none;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 22px;
    border-top: 1px solid #e5e7eb;
    background: #fff;
}

.bkm-btn {
    height: 32px;
    padding: 0 14px;
    border-radius: 8px;
    border: 1px solid #d1d5db;
    background: #fff;
    color: #111827;
    font-weight: 500;
    font-size: 12.5px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}

.bkm-btn:hover {
    background: #f9fafb;
}

.bkm-btn.primary {
    background: #EA6224;
    border-color: #EA6224;
    color: #fff;
    font-weight: 600;
}

.bkm-btn.primary:hover {
    background: #DE531B;
}

.bkm-btn:disabled {
    opacity: .6;
    cursor: not-allowed;
}

.bkm-sec {
    font-size: 11px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 10px;
}

.bkm-r-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.bkm-r-head .bkm-sec {
    margin-bottom: 0;
}

.bkm-add {
    height: 28px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid #F5C7B0;
    background: #FDF0E9;
    color: #EA6224;
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
}

.bkm-add:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.bkm .card {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent;
}

.bkm .card-body {
    padding: 0 !important;
}

.bkm .booking-card {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: none;
    padding: 0;
    overflow: hidden;
    margin-bottom: 12px;
}

.bkm .booking-card:hover {
    transform: none;
    box-shadow: none;
}

.bkm .booking-header {
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    padding: 10px 12px;
    margin: 0;
}

.bkm .booking-inputs,
.bkm .booking-products,
.bkm .booking-footer,
.bkm .edo-section {
    margin: 10px 12px;
}

.bkm .booking-inputs label,
.bkm .booking-header .form-label {
    font-size: 11px;
    font-weight: 500;
    color: #4b5563;
}

.bkm .cbm-grand {
    margin-top: 4px;
}

@media (max-width: 992px) {
    .bkm-body {
        flex-direction: column;
        overflow: auto;
    }

    .bkm-pane-l {
        width: 100%;
        min-width: 0;
        max-width: none;
        border-right: 0;
        border-bottom: 1px solid #e5e7eb;
        overflow: visible;
    }

    .bkm-pane-r {
        overflow: visible;
    }
}

/* ===== RESPONSIVE: máy tính bảng ===== */
@media (max-width: 1200px) {
    .bkc3-actions {
        align-items: flex-start;
    }

    .bkc3-toolbar {
        margin-left: 0;
    }
}

/* ===== RESPONSIVE: điện thoại ===== */
@media (max-width: 768px) {
    .bkc3 {
        position: relative;
        top: 0;
        left: 0 !important;
        right: 0;
        bottom: auto;
        min-height: calc(100vh - var(--etp-strip-h, 0px) - 50px);
        font-size: 12px;
    }

    .bkc3-page {
        overflow: visible;
    }

    .bkc3-deck {
        padding: 8px 10px;
    }

    .bkc3-grid {
        gap: 8px;
    }

    .bkc3 .filter-group {
        flex: 1 1 calc(50% - 8px);
        max-width: none;
        min-width: 0;
    }

    .bkc3 .bkc3-seg-group {
        flex: 1 1 100%;
    }

    .bkc3-seg {
        display: flex;
        width: 100%;
        overflow-x: auto;
    }

    .bkc3-seg button {
        flex: 1 0 auto;
    }

    .bkc3-filter-btns {
        flex: 1 1 100%;
        margin-left: 0;
    }

    .bkc3-filter-btns > button {
        flex: 1 1 0;
        min-width: 0;
        padding: 0 8px;
    }

    .bkc3-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .bkc3-kpis,
    .bkc3-toolbar {
        flex-wrap: nowrap;
        overflow-x: auto;
        margin-left: 0;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
    }

    .bkc3-kpi-group,
    .bkc3-toolbar > button,
    .bkc3-counter {
        flex: none;
    }

    .bkc3-grid-wrap {
        margin: 8px 0 0;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
        min-height: 70vh;
    }

    .bkc3-drawer {
        width: 100vw;
    }

    .bkc3-drawer .two {
        grid-template-columns: 1fr;
    }

    .bkm {
        width: 100vw;
        max-width: 100vw;
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
    }

    .bkm-head {
        padding: 10px 12px;
    }

    .bkm-title h2 {
        font-size: 15px;
    }

    .bkm-pane-l,
    .bkm-scroll {
        padding: 12px;
    }

    .bkm-foot {
        padding: 10px 12px;
    }

    .bkm-foot .bkm-btn {
        flex: 1 1 0;
        justify-content: center;
    }

    .bkm .cbt-th {
        flex-direction: column;
        align-items: stretch;
    }

    .bkm .cbt-th .cbt-f {
        flex: 1 1 auto !important;
        width: 100%;
    }

    .bkm .cbt-th-right {
        margin-left: 0;
        justify-content: space-between;
    }

    .bkm .cbt-g5 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bkm .cbt-clist {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bkm .cbm-grand {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .bkm .booking-header {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .bkm .booking-inputs {
        grid-template-columns: 1fr;
    }

    .bkm .shipment-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) !important;
    }
}

/* ===== THÔNG TIN LỊCH (cbk) – dùng chung popup ===== */
.cbk-sec {
    font-size: 11px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 8px;
}

.cbk-kv {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 16px;
    font-size: 12.5px;
}

.cbk-kv .l {
    color: #6b7280;
    font-size: 11px;
}

.cbk-kv .v {
    font-weight: 500;
    color: #111827;
    word-break: break-word;
}

.cbk-kv .v.strong {
    font-weight: 600;
}

.cbk-kv .span2 {
    grid-column: span 2;
}

.cbk-num {
    font-variant-numeric: tabular-nums;
}

.cbk-hr {
    border-top: 1px solid #e5e7eb;
    margin: 14px 0;
}

.cbk-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.cbk-chip {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    border: 1px solid #e5e7eb;
    background: #f3f4f6;
    color: #374151;
    white-space: nowrap;
}

.cbk-chip.orange {
    background: #fff7ed;
    color: #c2410c;
    border-color: #fed7aa;
}

.cbk-chip.red {
    background: #fef2f2;
    color: #b91c1c;
    border-color: #fecaca;
}

.cbk-chip.empty {
    color: #9ca3af;
    background: #fff;
}

.cbk-prog {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cbk-row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
}

.cbk-row .muted,
.cbk-row.muted {
    color: #6b7280;
}

.cbk-dashed {
    padding-top: 6px;
    border-top: 1px dashed #e5e7eb;
}

.cbk-bar {
    position: relative;
    height: 10px;
    border-radius: 999px;
    background: #e5e7eb;
    overflow: hidden;
}

.cbk-bar i {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    border-radius: 999px;
}

.c-blue { color: #1d4ed8; }
.c-teal { color: #0f766e; }
.c-orange { color: #c2410c; }
.c-green { color: #047857; }


/* ===== Thông tin lịch – thẻ v2 ===== */
.cbk-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cbk-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 14px 16px;
    box-shadow: 0 1px 2px rgba(17, 24, 39, .04);
}

.cbk-card-h {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 10px;
}

.cbk-card-h i {
    color: #EA6224;
    font-size: 12px;
}

.cbk-hero-top {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.cbk-id {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
    margin-right: 4px;
    font-variant-numeric: tabular-nums;
}

.cbk-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    background: #f3f4f6;
    color: #374151;
    border: 1px solid #e5e7eb;
    white-space: nowrap;
}

.cbk-pill.indigo {
    background: #eef2ff;
    color: #3730a3;
    border-color: #c7d2fe;
}

.cbk-company {
    margin-top: 10px;
    font-size: 15px;
    font-weight: 700;
    color: #111827;
    line-height: 1.3;
}

.cbk-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin-top: 4px;
    font-size: 12px;
    color: #6b7280;
}

.cbk-meta i {
    color: #9ca3af;
    margin-right: 2px;
}

.cbk-meta b {
    color: #111827;
    font-weight: 600;
}

.cbk-route {
    position: relative;
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #f9fafb;
    border: 1px solid #f1f3f7;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cbk-route::before {
    content: '';
    position: absolute;
    left: 17px;
    top: 22px;
    bottom: 26px;
    border-left: 2px dashed #d1d5db;
}

.cbk-stop {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    position: relative;
}

.cbk-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex: none;
    margin-top: 3px;
    border: 3px solid #fff;
    box-shadow: 0 0 0 1px #d1d5db;
    z-index: 1;
}

.cbk-dot.from {
    background: #1d4ed8;
}

.cbk-dot.to {
    background: #EA6224;
}

.cbk-stop .l,
.cbk-field .l {
    font-size: 10.5px;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 600;
}

.cbk-stop .v,
.cbk-field .v {
    font-size: 12.5px;
    font-weight: 600;
    color: #111827;
    word-break: break-word;
}

.cbk-route-region {
    align-self: flex-start;
    margin-left: 22px;
}

.cbk-field {
    margin-top: 12px;
}

.cbk-note {
    margin-top: 12px;
    padding: 8px 10px;
    border-radius: 8px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
    font-size: 12px;
    line-height: 1.4;
}

.cbk-note i {
    margin-right: 4px;
}

.cbk-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cbk-form-item > label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: #4b5563;
    margin-bottom: 4px;
}

.cbk-pickup-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

.cbk-pickup-wh {
    flex: 1 1 auto;
    min-width: 0;
}

.cbk-pickup-qty {
    width: 96px !important;
    flex: none;
}

.cbk-icon-btn {
    width: 32px;
    height: 32px;
    flex: none;
    border-radius: 8px;
    border: 1px solid #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.cbk-icon-btn.danger {
    border-color: #fecaca;
    background: #fff;
    color: #b91c1c;
}

.cbk-form-switch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #f9fafb;
    border: 1px solid #f1f3f7;
}

.cbk-form-switch .t {
    font-size: 12.5px;
    font-weight: 600;
    color: #111827;
}

.cbk-form-switch .d {
    font-size: 11px;
    color: #9ca3af;
}

.cbk-readonly {
    min-height: 32px;
    padding: 6px 10px;
    border-radius: 8px;
    background: #f9fafb;
    border: 1px solid #f1f3f7;
    font-size: 12.5px;
    color: #374151;
    word-break: break-word;
}

.cbk-edit .input-grid {
    display: block;
    margin: 0;
}

.cbk-edit .input-grid:empty {
    display: none;
}

.cbk-card .cbk-prog {
    border: 0;
    padding: 0;
}

.cbk-card .rz-dropdown,
.cbk-card .rz-numeric {
    border-radius: 8px !important;
    border-color: #d1d5db !important;
    min-height: 32px;
}

.cbk-edit .input-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 10px 12px !important;
    margin: 0 !important;
}

.cbk-edit .input-grid .input-grid-item,
.cbk-edit .input-grid .input-grid-item.horizontal,
.cbk-edit .input-grid .input-grid-item.full-width {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    grid-column: auto !important;
    min-width: 0;
}

.cbk-edit .input-grid .input-grid-item.full-width {
    grid-column: 1 / -1 !important;
}

.cbk-edit .input-grid .input-grid-item .grid-label {
    display: block;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #4b5563 !important;
    margin: 0 0 4px 0 !important;
    min-width: 0 !important;
    width: auto !important;
}

.cbk-edit .input-grid .input-grid-item .grid-value {
    min-height: 32px;
    padding: 6px 10px;
    border-radius: 8px;
    background: #f9fafb;
    border: 1px solid #f1f3f7;
    font-size: 12.5px;
    color: #374151;
}

.cbk-edit .input-grid .form-control,
.cbk-edit .input-grid .form-select {
    height: 32px;
    border-radius: 8px;
    border-color: #d1d5db;
    font-size: 12.5px;
}

.cbk-edit .input-grid .rz-dropdown,
.cbk-edit .input-grid .rz-numeric,
.cbk-edit .input-grid .rz-datepicker {
    border-radius: 8px !important;
    min-height: 32px;
}

.cbk-edit .input-grid .btn-sm {
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

/* ===== Nhiều lịch trong popup ===== */
.cbk-group-h {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-left: 4px solid var(--cbk-acc, #1d4ed8);
    cursor: pointer;
    user-select: none;
    font-size: 12.5px;
    margin-top: 4px;
    position: sticky;
    top: -18px;
    z-index: 2;
    box-shadow: 0 1px 2px rgba(17, 24, 39, .06);
}

.cbk-group-h:hover {
    background: #f9fafb;
}

.cbk-group-idx {
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--cbk-acc, #1d4ed8);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.cbk-group-name {
    flex: 1;
    min-width: 0;
    color: #374151;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cbk-group-qty {
    color: #6b7280;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.cbk-group-h i {
    color: #9ca3af;
    font-size: 11px;
}

.cbk-stack.multi {
    padding-left: 10px;
    border-left: 3px solid var(--cbk-acc, #1d4ed8);
    margin-left: 2px;
}

.cbk-stack.collapsed {
    display: none;
}

/* ===== Thông tin lịch – bố cục gọn ===== */
.bkm-pane-l {
    padding: 12px 14px;
}

.bkm .cbk-stack {
    gap: 8px;
}

.bkm .cbk-card {
    padding: 10px 12px;
}

/* ===== Tuyến 1 dòng: Nơi lấy → Nơi giao ===== */
.bkm .cbk-route {
    flex-direction: row !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px !important;
    padding: 7px 10px !important;
    margin-top: 8px !important;
}

.bkm .cbk-route::before {
    display: none !important;
}

.bkm .cbk-stop {
    align-items: center !important;
    gap: 6px !important;
    min-width: 0;
}

.bkm .cbk-stop .l {
    display: none !important;
}

.bkm .cbk-stop .v {
    font-size: 12.5px;
}

.bkm .cbk-stop + .cbk-stop::before {
    content: '\2192';
    color: #9ca3af;
    font-weight: 700;
    margin-right: 2px;
}

.bkm .cbk-dot {
    margin-top: 0 !important;
    width: 10px !important;
    height: 10px !important;
    border-width: 2px !important;
}

.bkm .cbk-route-region {
    margin-left: auto !important;
    align-self: center !important;
}

.cbk-field-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
    margin-top: 12px;
}

.cbk-field-row .cbk-field {
    margin-top: 0;
}

.cbk-field .v.cbk-note-text {
    font-weight: 500;
    color: #374151;
    white-space: pre-line;
}

/* ===== Điều chỉnh lịch – 2 ô 1 hàng, đồng nhất 3 loại ===== */
.cbk-edit .cbk-form {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px 12px;
}

.cbk-edit .cbk-form + .input-grid {
    margin-top: 10px !important;
}

.cbk-edit .cbk-form-item > label,
.cbk-edit .input-grid .input-grid-item .grid-label {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #4b5563 !important;
    margin: 0 0 4px 0 !important;
}

.cbk-edit .cbk-form-switch {
    align-self: end;
    min-height: 32px;
    padding: 6px 10px;
}

.cbk-edit .cbk-form-switch .d {
    display: none;
}

.cbk-edit .cbk-pickup-row,
.cbk-edit .input-grid .input-grid-item .d-flex {
    gap: 4px !important;
    margin-bottom: 4px !important;
}

.cbk-edit .cbk-pickup-qty,
.cbk-edit .input-grid .input-grid-item .rz-numeric {
    width: 76px !important;
    flex: none;
}

.cbk-edit .input-grid .input-grid-item .d-flex > .rz-dropdown,
.cbk-edit .input-grid .input-grid-item .d-flex > input.form-control {
    flex: 1 1 auto;
    min-width: 0;
}

.cbk-edit .cbk-icon-btn,
.cbk-edit .input-grid .btn-sm {
    width: 30px !important;
    height: 30px !important;
}

.cbk-edit .bill-switch-label {
    font-size: 11px;
    color: #6b7280;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .cbk-edit .cbk-form,
    .cbk-edit .input-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* ===== Header đội xe 1 dòng ===== */
@media (min-width: 769px) {
    .bkm .cbt-th {
        flex-wrap: nowrap;
    }

    .bkm .cbt-th .cbt-f {
        min-width: 0;
        flex: 1 1 220px !important;
    }

    .bkm .cbt-th .cbt-f + .cbt-f {
        flex: 0 1 170px !important;
    }

    .bkm .cbt-th-right {
        flex: none;
        white-space: nowrap;
    }

    .bkm .cbt-th-right .cbt-chip {
        white-space: nowrap;
    }

    .bkm .cbt-th-right .cbt-cancelnote {
        max-width: 160px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* ===== Khối book đội xe dùng chung (Xe tải / Sà lan / Cont) ===== */
.cbt-block {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 12px;
    font-size: 12.5px;
}

.cbt-block.cancelled {
    opacity: .55;
}

.cbt-th {
    display: flex;
    gap: 10px;
    align-items: flex-end;
    flex-wrap: wrap;
    padding: 10px 12px;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
}

.cbt-th-right {
    margin-left: auto;
    display: flex;
    gap: 8px;
    align-items: center;
}

.cbt-body {
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cbt-g4,
.cbt-gb {
    display: grid;
    gap: 10px;
    align-items: end;
}

.cbt-g4 {
    grid-template-columns: 1.4fr .9fr .9fr .9fr;
}

.cbt-gb {
    grid-template-columns: 1.4fr .9fr .9fr .8fr .8fr;
}

.cbt-f {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.cbt-f > label {
    font-size: 11px;
    font-weight: 500;
    color: #4b5563;
    margin: 0;
}

.cbt-readonly {
    min-height: 32px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #f3f4f6;
    color: #374151;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.cbt-switch {
    min-height: 32px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.cbt-range {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cbt-chip {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    border: 1px solid #e5e7eb;
    background: #f3f4f6;
    color: #374151;
    white-space: nowrap;
}

.cbt-chip.blue {
    background: #eff6ff;
    color: #1d4ed8;
    border-color: #bfdbfe;
}

.cbt-chip.green {
    background: #ecfdf5;
    color: #047857;
    border-color: #a7f3d0;
}

.cbt-chip.red {
    background: #fef2f2;
    color: #b91c1c;
    border-color: #fecaca;
}

.cbt-cancelnote {
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 11px;
    color: #6b7280;
}

.cbt-btn {
    height: 30px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid #d1d5db;
    background: #fff;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
}

.cbt-btn.danger {
    color: #b91c1c;
    border-color: #fecaca;
}

.cbt-btn.danger:hover {
    background: #fef2f2;
}

@media (min-width: 769px) {
    .bkm .cbt-th .cbt-th-right {
        align-self: flex-end;
        min-height: 32px;
    }
}

@media (max-width: 768px) {
    .bkm .cbt-g4,
    .bkm .cbt-gb {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ===== Thông tin lịch cùng cỡ chữ với Thông tin book ===== */
.bkm .bkm-pane-l .cbk-card {
    padding: 10px 12px;
    font-size: 12.5px;
}

.bkm .bkm-pane-l .cbk-id {
    font-size: 14px;
}

.bkm .bkm-pane-l .cbk-company {
    margin-top: 6px;
    font-size: 13px;
}

.bkm .bkm-pane-l .cbk-meta,
.bkm .bkm-pane-l .cbk-note,
.bkm .bkm-pane-l .cbk-row {
    font-size: 11.5px;
}

.bkm .bkm-pane-l .cbk-stop .v,
.bkm .bkm-pane-l .cbk-field .v,
.bkm .bkm-pane-l .cbk-kv,
.bkm .bkm-pane-l .cbk-readonly,
.bkm .bkm-pane-l .cbk-form-switch .t {
    font-size: 12px;
}

.bkm .bkm-pane-l .cbk-field .l,
.bkm .bkm-pane-l .cbk-kv .l,
.bkm .bkm-pane-l .cbk-form-switch .d {
    font-size: 10.5px;
}

.bkm .rz-dropdown .rz-dropdown-label,
.bkm .rz-dropdown .rz-inputtext,
.bkm .rz-numeric .rz-numeric-input,
.bkm .rz-datepicker .rz-inputtext,
.bkm .rz-textbox,
.bkm .rz-textarea {
    font-size: 12.5px;
}

.tpr-tabs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 8px;
    margin: 9px 13.5px 0;
    border-bottom: 2px solid var(--line);
    padding: 0 4px 4px;
    flex: none;
}

.tpr-tabs .tpr-tab {
    padding: 6px 14px;
    border: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -6px;
    background: none;
    font: inherit;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--ink-3);
    cursor: pointer;
    white-space: nowrap;
}

.tpr-tabs .tpr-tab.on {
    color: var(--brand);
    border-bottom-color: var(--brand);
}

.tpr-tabs .sp {
    flex: 1;
}

.tpr-info {
    font-size: 11.5px;
    color: var(--ink-3);
    white-space: nowrap;
}

.tpr-info b {
    color: var(--ink);
}

.tpr-warn {
    color: #b45309 !important;
}

.tpr-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 12px;
    color: var(--ink);
    cursor: pointer;
    white-space: nowrap;
}

.tpr-check input {
    accent-color: var(--brand);
    width: 14px;
    height: 14px;
    cursor: pointer;
}

.tpr-wrap {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    margin: 9px 13.5px 0;
}

@media (max-width: 768px) {
    .tpr-tabs {
        margin: 8px 0 0;
    }

    .tpr-info {
        margin-left: 0;
        white-space: normal;
    }

    .tpr-wrap {
        margin: 8px 0 0;
        overflow: visible;
    }
}