﻿







.app-main-content > .mud-container:has(.btc-screen) {
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.btc-screen {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.btc-stickyhead {
    flex: 0 0 auto;
    background: var(--bg-app);
    
    padding: var(--space-1) 0 0;
    border-bottom: 1px solid var(--border-1);
}
.btc-stickyhead > *:last-child { margin-bottom: var(--space-4); }

.btc-screen-body {
    flex: 1 1 auto;
    min-height: 0;
    
    display: flex;
    flex-direction: column;
    
    padding: var(--space-4) 0 var(--space-5);
}



.btc-title {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    color: var(--fg-1);
    letter-spacing: -0.01em;
}

.btc-headrow {
    display: grid;
    
    grid-template-columns: auto 1fr auto;
    align-items: center;
    column-gap: 20px;
}
.btc-headrow > .btc-min0 { grid-area: 1 / 1; }
.btc-headrow > .btc-toolbar { grid-area: 1 / 2; }
.btc-headrow > .btc-edit-acts { grid-area: 1 / 3; }

.btc-toolbar {
    display: flex;
    align-items: center;
    
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.btc-search {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    height: 36px;
    min-width: 244px;
    padding: 0 12px;
    background: var(--bg-surface);
    border: 1px solid var(--border-2);
    border-radius: var(--radius-input);
}
.btc-search svg { width: 16px; height: 16px; color: var(--fg-4); flex-shrink: 0; }
.btc-search input {
    width: 100%;
    padding: 0;
    border: 0;
    outline: 0;
    background: none;
    font-family: var(--font-sans);
    font-size: 13.5px;
    color: var(--fg-1);
}
.btc-search input::placeholder { color: var(--fg-4); }

.btc-select {
    height: 36px;
    padding: 0 30px 0 12px;
    border: 1px solid var(--border-2);
    border-radius: var(--radius-input);
    background: var(--bg-surface);
    font-family: var(--font-sans);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--fg-2);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    
    background-image: linear-gradient(45deg, transparent 50%, var(--fg-4) 50%),
                      linear-gradient(135deg, var(--fg-4) 50%, transparent 50%);
    background-position: calc(100% - 15px) 15px, calc(100% - 11px) 15px;
    background-size: 4px 4px, 4px 4px;
    background-repeat: no-repeat;
}
.btc-select:focus { border-color: var(--brand); box-shadow: var(--app-focus-ring); outline: 0; }

.btc-select.full { height: 38px; width: 100%; }


.btc-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 36px;
    padding: 0 15px;
    border: 1px solid var(--border-2);
    border-radius: var(--radius-button);
    background: var(--bg-surface);
    color: var(--fg-2);
    font-family: var(--font-sans);
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: all 120ms var(--ease-in-out);
}
.btc-btn svg { width: 16px; height: 16px; }
.btc-btn:hover { border-color: var(--border-strong); color: var(--fg-1); background: var(--slate-50); }
.btc-btn.primary {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--brand-on);
    box-shadow: var(--app-shadow-btn-primary);
}
.btc-btn.primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
.btc-btn.primary:active { transform: translateY(0.5px); }
.btc-btn:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }
.btc-btn.sm { height: 30px; padding: 0 11px; font-size: 12.5px; border-radius: var(--radius-sm); }
.btc-btn.sm svg { width: 14px; height: 14px; }



.btc-split {
    display: grid;
    gap: var(--space-4);
    min-height: 0;
    align-items: stretch;
    grid-template-columns: 296px minmax(0, 1fr) 344px;
    
    flex: 1 1 auto;
    min-height: 420px;
}

.btc-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--bg-surface);
    border: 1px solid var(--border-1);
    border-radius: 12px;
    box-shadow: var(--shadow-xs);
}
.btc-panel-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--border-1);
}
.btc-panel-t { font-size: 13px; font-weight: 700; color: var(--fg-1); letter-spacing: 0.01em; }
.btc-panel-n { font-size: 12px; font-weight: 600; color: var(--fg-4); font-variant-numeric: tabular-nums; }

.btc-panel-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: auto; }



.btc-setlist { display: flex; flex-direction: column; gap: 2px; padding: var(--space-2); }

.btc-setrow {
    display: flex;
    flex-direction: column;
    
    align-items: flex-start;
    gap: 5px;
    width: 100%;
    padding: 10px 11px;
    text-align: left;
    background: none;
    border: 1px solid transparent;
    border-radius: 10px;
    font-family: var(--font-sans);
    cursor: pointer;
    transition: background 120ms, border-color 120ms;
}
.btc-setrow:hover { background: var(--slate-50); }
.btc-setrow.on {
    background: var(--brand-soft);
    border-color: var(--border-2);                                    
    border-color: color-mix(in srgb, var(--brand) 22%, transparent);
}
.btc-setrow-t { font-size: 13.5px; font-weight: 600; color: var(--fg-1); line-height: 1.35; }
.btc-setrow.on .btc-setrow-t { color: var(--brand); }
.btc-setrow-m { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.btc-code { font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--fg-4); }

.btc-setrow-d {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    row-gap: 2px;
    font-size: 11.5px;
    color: var(--fg-3);
}
.btc-setrow-d > span { white-space: nowrap; }
.btc-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--fg-4); flex-shrink: 0; }


.btc-st {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px;
    border-radius: var(--radius-pill);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
}
.btc-st.dung  { background: var(--status-success-bg); color: var(--status-success-fg); }
.btc-st.nhap  { background: var(--slate-100);         color: var(--fg-3); }
.btc-st.ngung { background: var(--status-warning-bg); color: var(--status-warning-fg); }




.btc-edit-head {
    --btc-head-px: 18px;
    flex: 0 0 auto;
    padding: 16px var(--btc-head-px) 14px;
    border-bottom: 1px solid var(--border-1);
}
.btc-edit-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.btc-edit-name { font-size: 17px; font-weight: 700; color: var(--fg-1); line-height: 1.3; letter-spacing: -0.005em; }
.btc-edit-meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-top: 6px;
    font-size: 12px;
    color: var(--fg-3);
}
.btc-ver {
    padding: 2px 7px;
    border-radius: var(--radius-xs);
    background: var(--slate-100);
    font-family: var(--font-mono);
    font-size: 11.5px;
    font-weight: 700;
    color: var(--fg-2);
}
.btc-edit-acts { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }



.btc-cfg {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    row-gap: 14px;
    flex-wrap: wrap;
    
    margin: 14px calc(-1 * var(--btc-head-px, 18px)) 0;
    padding: 14px var(--btc-head-px, 18px) 0;
    border-top: 1px solid var(--border-1);
}
.btc-cfg-item { display: flex; flex-direction: column; gap: 6px; }

.btc-cfg-tog { margin-left: auto; align-self: flex-end; }
.btc-cfg-l {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fg-4);
}


.btc-seg { display: inline-flex; gap: 2px; padding: 3px; background: var(--bg-sunken); border-radius: 9px; }
.btc-seg button {
    padding: 5px 11px;
    border: 0;
    border-radius: 7px;
    background: none;
    font-family: var(--font-sans);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--fg-3);
    white-space: nowrap;
    cursor: pointer;
    transition: all 120ms var(--ease-in-out);
}
.btc-seg button:hover { color: var(--fg-1); }
.btc-seg button.on { background: var(--bg-surface); color: var(--brand); box-shadow: var(--shadow-xs); }
.btc-seg button.on.warn { color: var(--warning-700); }
.btc-seg button.on.mute { color: var(--fg-2); }


.btc-switchrow { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; }
.btc-switch {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    flex-shrink: 0;
    width: 36px;
    height: 20px;
    border: none;
    border-radius: var(--radius-pill);
    background: var(--slate-300);
    cursor: pointer;
    transition: background 160ms var(--ease-in-out);
}
.btc-switch::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: var(--radius-pill);
    
    background: var(--brand-on);
    box-shadow: var(--shadow-sm);
    transition: transform 160ms var(--ease-out);
}
.btc-switch:checked { background: var(--brand); }
.btc-switch:checked::after { transform: translateX(16px); }
.btc-switch-t { font-size: 13px; font-weight: 500; color: var(--fg-2); }


.btc-usedin {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-top: 14px;
    padding-top: 13px;
    border-top: 1px dashed var(--border-1);
}
.btc-usedin-l { font-size: 11.5px; font-weight: 600; color: var(--fg-3); }
.btc-usechip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border: 1px solid var(--border-1);
    border-radius: var(--radius-pill);
    background: var(--slate-50);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--fg-2);
}
.btc-usechip svg { width: 12px; height: 12px; color: var(--fg-4); }


.btc-group { border-bottom: 1px solid var(--border-1); }
.btc-group:last-child { border-bottom: 0; }
.btc-group-h {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    padding: 9px 18px;
    background: var(--slate-25);
    border-bottom: 1px solid var(--border-1);
}

.btc-group-n { font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--fg-3); }
.btc-group-c { flex-shrink: 0; font-size: 11px; font-weight: 600; color: var(--fg-4); font-variant-numeric: tabular-nums; }
.btc-group-c.rong { color: var(--fg-4); font-style: italic; }


.btc-crit {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
    padding: 12px 18px;
    border-bottom: 1px solid var(--border-1);
    transition: background 120ms;
}
.btc-crit:last-child { border-bottom: 0; }
.btc-crit:hover { background: var(--slate-25); }
.btc-grip {
    display: inline-flex;
    padding-top: 2px;
    color: var(--fg-4);
    opacity: 0;
    cursor: grab;
    transition: opacity 120ms;
}
.btc-crit:hover .btc-grip { opacity: 1; }
.btc-grip svg { width: 14px; height: 14px; }

.btc-crit-t { font-size: 14px; font-weight: 600; color: var(--fg-1); line-height: 1.4; }
.btc-crit-g {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 3px;
    font-size: 12px;
    color: var(--fg-3);
    line-height: 1.5;
}
.btc-crit-flags { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 7px; }

.btc-crit-acts { position: relative; display: flex; align-items: center; gap: 4px; }

.btc-iconbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--fg-4);
    cursor: pointer;
    transition: all 120ms;
}
.btc-iconbtn svg { width: 15px; height: 15px; }
.btc-iconbtn:hover { border-color: var(--border-2); color: var(--fg-2); background: var(--bg-surface); }
.btc-iconbtn.on { border-color: var(--border-strong); color: var(--fg-1); background: var(--slate-50); }
.btc-iconbtn.danger:hover {
    border-color: var(--error-500);
    color: var(--status-error-fg);
    background: var(--status-error-bg);
}


.btc-flag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2.5px 7px;
    border: 1px solid var(--border-1);
    border-radius: var(--radius-xs);
    background: var(--slate-50);
    color: var(--fg-3);
    font-family: var(--font-sans);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: all 120ms;
}
.btc-flag:hover { border-color: var(--border-2); color: var(--fg-2); }
.btc-flag.on {
    background: var(--brand-soft);
    border-color: var(--border-2);                                    
    border-color: color-mix(in srgb, var(--brand) 26%, transparent);
    color: var(--brand);
}
.btc-flag.kind { cursor: default; font-family: var(--font-mono); font-size: 10px; }
.btc-flag.kind:hover { border-color: var(--border-1); color: var(--fg-3); }


.btc-quick { display: flex; align-items: center; gap: 9px; padding: 10px 18px 12px; background: var(--slate-25); }
.btc-quick-ic { display: inline-flex; flex-shrink: 0; color: var(--fg-4); }
.btc-quick-ic svg { width: 15px; height: 15px; }
.btc-quick input {
    flex: 1 1 auto;
    min-width: 0;
    height: 32px;
    padding: 0 11px;
    border: 1px dashed var(--border-2);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--fg-1);
    outline: 0;
    transition: border-color 120ms;
}
.btc-quick input::placeholder { color: var(--fg-4); }
.btc-quick input:focus { border-style: solid; border-color: var(--brand); box-shadow: var(--app-focus-ring); }

.btc-quick.plain { margin-top: var(--space-4); background: none; }



.btc-col-preview { display: flex; flex-direction: column; min-height: 0; }
.btc-pv-head {
    flex: 0 0 auto;
    padding: 13px 16px;
    border-bottom: 1px solid var(--border-1);
    background: var(--slate-25);
    border-radius: 12px 12px 0 0;
}
.btc-pv-eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--fg-4); }

.btc-pv-head-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    min-height: 20px;
}
.btc-pv-t { margin-top: 4px; font-size: 14px; font-weight: 700; color: var(--fg-1); line-height: 1.3; }
.btc-pv-s { margin-top: 2px; font-size: 12px; color: var(--fg-3); }


.btc-pvzoom {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border: 1px solid var(--border-1);
    border-radius: var(--radius-pill);
    background: var(--bg-surface);
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--fg-2);
    cursor: pointer;
    transition: background 120ms var(--ease-out), color 120ms var(--ease-out), border-color 120ms var(--ease-out);
}
.btc-pvzoom:hover { background: var(--slate-50); color: var(--fg-1); border-color: var(--border-2); }
.btc-pvzoom:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--app-focus-ring); }
.btc-pvzoom.on { background: var(--slate-100); color: var(--fg-1); }


.btc-zoom-scrim {
    position: fixed;
    inset: 0;
    z-index: 1400;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-5);
    background: var(--mud-palette-overlay-dark);
    animation: btcFade 200ms var(--ease-out) both;
}
.btc-zoom-box {
    display: flex;
    flex-direction: column;
    width: min(720px, 100%);
    
    height: min(900px, 100%);
    animation: btcRise 200ms var(--ease-out) both;
}

.btc-zoom-box > .btc-col-preview { flex: 1 1 auto; min-height: 0; }

.btc-zoom-box:focus { outline: none; }



.btc-bb-ghicong {
    margin-top: 2px;
    font-size: 11px;
    font-style: italic;
    color: var(--fg-4);
}

.btc-grp-canh {
    flex-shrink: 0;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .01em;
    padding: 1px 6px;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}


.btc-grp-canh.chua  { background: var(--slate-50);            color: var(--fg-3); }
.btc-grp-canh.khong { background: var(--status-warning-bg);   color: var(--status-warning-fg); }




.btc-grp-pc {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 6px;
    padding: 0 16px 6px 16px;
    font-size: 11px;
    color: var(--fg-4);
}
.btc-grp-pc-l { font-weight: 600; letter-spacing: .01em; }
.btc-grp-pc-n {
    font-weight: 600;
    color: var(--fg-2);
    background: var(--slate-50);
    border-radius: 999px;
    padding: 1px 8px;
    white-space: nowrap;
}


.btc-mtc-nhom {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0 16px 8px 16px;
    padding: 7px 10px;
    border-radius: 8px;
    background: var(--slate-50);
}

.btc-mtc-ng { display: flex; align-items: center; flex-wrap: wrap; gap: 5px 7px; }
.btc-mtc-ng-l {
    flex: 0 0 auto;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--fg-4);
}
.btc-mtc-trong { font-size: 12px; font-style: italic; color: var(--fg-4); }

.btc-mtc-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 12px;
    font-weight: 600;
    color: var(--fg-2);
    background: var(--bg-surface);
    border: 1px solid var(--border-1);
    border-radius: 999px;
    padding: 2px 4px 2px 9px;
}

.btc-mtc-chip:not(:has(.btc-pc-chip-x)) { padding-right: 9px; }
.btc-mtc-chip-sl {
    font-size: 11px;
    font-weight: 700;
    color: var(--fg-4);
    font-variant-numeric: tabular-nums;
}
.btc-mtc-chip-sl.xong { color: var(--status-success-fg); }


.btc-mtc-trung {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--status-warning-fg);
    background: var(--status-warning-bg);
    border-radius: 999px;
    padding: 1px 8px;
    white-space: nowrap;
}


.btc-mtc-them {
    flex: 0 0 auto;
    font: inherit;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--brand);
    background: transparent;
    border: 1px dashed var(--border-1);
    border-radius: 999px;
    padding: 2px 8px;
    cursor: pointer;
}
.btc-mtc-them:hover:not(:disabled) { border-style: solid; background: var(--bg-surface); }
.btc-mtc-them:disabled { opacity: .55; cursor: default; }

.btc-mtc-loidan-in {
    width: 100%;
    font: inherit;
    font-size: 12.5px;
    color: var(--fg-2);
    background: var(--bg-surface);
    border: 1px solid var(--border-1);
    border-radius: 7px;
    padding: 5px 8px;
}
.btc-mtc-loidan-in:focus { outline: 2px solid var(--brand); outline-offset: -1px; }
.btc-mtc-loidan-in:disabled { opacity: .6; }


.btc-mtc-cabo {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 16px;
    border-bottom: 1px solid var(--border-1);
}
.btc-mtc-cabo-l {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--fg-4);
}
.btc-mtc-cabo-sel { flex: 1 1 220px; min-width: 0; max-width: 340px; }


.btc-loidan {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin: 0 0 8px;
    padding: 7px 10px;
    
    border-radius: 8px;
    background: var(--slate-50);
    font-size: 12.5px;
    color: var(--fg-2);
}
.btc-loidan-nhom {
    flex: 0 0 auto;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--fg-4);
}
.btc-loidan-txt { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.btc-loidan-ai  { flex: 0 0 auto; font-size: 11px; font-style: italic; color: var(--fg-4); }


.btc-grp-khoa {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 16px 10px 16px;
    padding: 8px 10px;
    border: 1px dashed var(--border-1);
    border-radius: 8px;
    background: var(--slate-50);
    font-size: 12px;
    color: var(--fg-4);
}
.btc-grp-khoa svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 1px; }



.btc-pv-cong {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 3px;
    font-size: 11px;
    font-style: italic;
    color: var(--status-success-fg);
}
.btc-pv-cong svg { width: 12px; height: 12px; flex-shrink: 0; }



.btc-pv-cai {
    margin-top: 7px;
    padding: 7px 10px 8px;
    border-radius: 8px;
    background: var(--slate-50);
    color: var(--fg-2);
    font-size: 12px;
}
.btc-pv-cai-dau { color: var(--fg-1); }


.btc-pv-cai.hoa .btc-pv-cai-dau { color: var(--fg-3); }

.btc-pv-cai-bang {
    width: 100%;
    margin-top: 7px;
    border-collapse: collapse;
    font-size: 11.5px;
}
.btc-pv-cai-bang th,
.btc-pv-cai-bang td {
    text-align: left;
    vertical-align: top;
    padding: 4px 10px 4px 0;
    font-weight: 400;
}
.btc-pv-cai-bang th:last-child,
.btc-pv-cai-bang td:last-child { padding-right: 0; }
.btc-pv-cai-bang thead th {
    padding-bottom: 3px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--fg-4);
    border-bottom: 1px solid var(--border-1);
}
.btc-pv-cai-bang tbody tr + tr > * { border-top: 1px solid var(--border-1); }
.btc-pv-cai-bang tbody th { color: var(--fg-2); }
.btc-pv-cai-bang tbody th .ten { font-weight: 600; }

.btc-pv-cai-bang tr.dung > * { color: var(--fg-1); }
.btc-pv-cai-bang tr.dung th .ten { font-weight: 700; }

.btc-pv-cai-bang td.gc { width: 100%; color: var(--fg-3); }
.btc-pv-cai-bang .luc {
    white-space: nowrap;
    color: var(--fg-4);
    font-variant-numeric: tabular-nums;
}


.btc-pv-cai-dang {
    margin-left: 6px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--fg-4);
}

.btc-pv-cai-cuoi {
    margin-top: 7px;
    font-size: 11.5px;
    font-style: italic;
    color: var(--fg-3);
}


@media (max-width: 560px) {
    .btc-pv-cai-bang thead {
        position: absolute;
        width: 1px; height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
    .btc-pv-cai-bang tbody tr { display: block; padding: 5px 0; }
    .btc-pv-cai-bang tbody tr + tr { border-top: 1px solid var(--border-1); }
    .btc-pv-cai-bang tbody tr + tr > * { border-top: 0; }
    .btc-pv-cai-bang tbody th,
    .btc-pv-cai-bang tbody td { display: block; width: auto; padding: 1px 0; }
    .btc-pv-cai-bang tbody td:empty { display: none; }
    .btc-pv-cai-bang tbody td::before { content: attr(data-nhan) ": "; color: var(--fg-4); }
}


.btc-pc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.btc-pc-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--fg-2);
    background: var(--slate-50);
    border: 1px solid var(--border-1);
    border-radius: 999px;
    padding: 2px 4px 2px 10px;
}
.btc-pc-chip-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: 0;
    border-radius: 999px;
    background: none;
    color: var(--fg-4);
    cursor: pointer;
}
.btc-pc-chip-x:hover { background: var(--slate-100); color: var(--status-error-fg); }
.btc-pc-chip-x svg { width: 11px; height: 11px; }


.btc-pc-add {
    width: 100%;
    font: inherit;
    font-size: 12.5px;
    color: var(--fg-2);
    background: var(--bg-surface);
    border: 1px solid var(--border-1);
    border-radius: 8px;
    padding: 6px 8px;
}
.btc-pc-add { cursor: pointer; }
.btc-pc-add:focus { outline: 2px solid var(--brand); outline-offset: -1px; }

.btc-pc-mocoi {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 10px;
    padding: 9px 11px;
    border: 1px solid currentColor;
    border-radius: 8px;
    background: var(--bg-surface);
    color: var(--status-warning-fg);
    font-size: 12px;
}
.btc-pc-mocoi svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 1px; }
.btc-mtc-mocoi-ds { margin-top: 7px; }

.btc-pv-tatca {
    flex-shrink: 0;
    background: none;
    border: 1px solid var(--border-1);
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    color: var(--fg-3);
    cursor: pointer;
}
.btc-pv-tatca:hover { background: var(--slate-50); color: var(--fg-1); }

.btc-pv-bar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border-1);
    font-size: 12px;
}
.btc-pv-prog { font-weight: 600; color: var(--fg-2); font-variant-numeric: tabular-nums; }
.btc-pv-left { font-weight: 600; }

.btc-pv-left.block { color: var(--status-warning-fg); }
.btc-pv-left.ok { color: var(--status-success-fg); }

.btc-pv-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: auto; }


.btc-pv-gh {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 8px 16px 4px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--fg-4);
}


.btc-pv-row {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 6px;
    padding: 9px 16px 9px 34px;
    border-bottom: 1px solid var(--border-1);
}
.btc-pv-row > .btc-pv-no {
    grid-column: 1;
    grid-row: 1;
    margin-right: 0;              
    
    line-height: 18.1px;
}
.btc-pv-row > *:not(.btc-pv-no) { grid-column: 2; }
.btc-pv-row:last-child { border-bottom: 0; }


.btc-pv-row.thieu {
    background: var(--status-error-bg, rgba(220, 38, 38, .06));
    border-radius: 6px;
}
.btc-pv-row.thieu > .btc-pv-no { color: var(--error-500); font-weight: 700; }

.btc-pv-note.thieu {
    border-color: var(--error-500);
}
.btc-pv-note.thieu:focus {
    border-color: var(--error-500);
    outline-color: var(--error-500);
}
.btc-pv-row::before {
    content: '';
    position: absolute;
    left: 16px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--border-2);
}
.btc-pv-row::after {
    content: '';
    position: absolute;
    left: 16px;
    top: 18px;
    width: 11px;
    height: 1px;
    background: var(--border-2);
}
.btc-pv-row:last-child::before { bottom: auto; height: 18px; }

.btc-pv-row:has(+ .btc-pv-gh)::before { bottom: auto; height: 18px; }

.btc-pv-rt { font-size: 12.5px; font-weight: 500; color: var(--fg-1); line-height: 1.45; }
.btc-pv-req { color: var(--error-500); font-weight: 700; }


.btc-pv-vote { display: flex; gap: 5px; margin-top: 7px; }
.btc-vote {
    flex: 1 1 0;
    height: 27px;
    border: 1px solid var(--border-2);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    color: var(--fg-3);
    font-family: var(--font-sans);
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 120ms;
}
.btc-vote:hover { border-color: var(--border-strong); color: var(--fg-1); }
.btc-vote.on.dat   { background: var(--status-success-bg); border-color: var(--success-500);  color: var(--success-700); }
.btc-vote.on.truot { background: var(--status-error-bg);   border-color: var(--error-500);    color: var(--error-700); }
.btc-vote.on.na    { background: var(--slate-100);         border-color: var(--border-strong); color: var(--fg-2); }
.btc-vote:disabled { opacity: 0.4; cursor: not-allowed; }

.btc-pv-note {
    width: 100%;
    min-height: 52px;
    margin-top: 7px;
    padding: 7px 9px;
    border: 1px solid var(--border-2);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    font-family: var(--font-sans);
    font-size: 12px;
    color: var(--fg-1);
    outline: 0;
    resize: vertical;
}
.btc-pv-note:focus { border-color: var(--brand); box-shadow: var(--app-focus-ring); }
.btc-pv-note::placeholder { color: var(--fg-4); }

.btc-pv-note.skip { margin: 0 0 10px; }

.btc-pv-foot {
    flex: 0 0 auto;
    padding: 12px 16px;
    border-top: 1px solid var(--border-1);
    background: var(--slate-25);
    border-radius: 0 0 12px 12px;
}
.btc-pv-warn {
    display: flex;
    gap: var(--space-2);
    margin-bottom: 10px;
    padding: 9px 11px;
    border-radius: var(--radius-sm);
    font-size: 11.5px;
    line-height: 1.45;
}
.btc-pv-warn.block { background: var(--status-error-bg);   color: var(--status-error-fg); }
.btc-pv-warn.warn  { background: var(--status-warning-bg); color: var(--status-warning-fg); }
.btc-pv-warn.info  { background: var(--status-info-bg);    color: var(--status-info-fg); }
.btc-pv-warn svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 1px; }

.btc-pv-warn.duoi { margin: 10px 0 0; }
.btc-pv-btns { display: flex; gap: var(--space-2); }
.btc-pv-btns .btc-btn { flex: 1 1 0; justify-content: center; }


.btc-pv-flag {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 6px 0 0;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.4;
}
.btc-pv-flag svg { width: 13px; height: 13px; flex-shrink: 0; }
.btc-pv-flag.cho   { color: var(--status-warning-fg); }
.btc-pv-flag.truot { color: var(--status-error-fg); }


.btc-foot-note {
    flex: 0 0 auto;
    padding: 10px 16px;
    border-top: 1px solid var(--border-1);
    background: var(--slate-25);
    border-radius: 0 0 12px 12px;
    font-size: 11.5px;
    color: var(--fg-4);
    line-height: 1.5;
}
.btc-foot-note b { color: var(--fg-3); font-weight: 700; }



.btc-crit[draggable="true"] { position: relative; }
.btc-crit.dragging { opacity: 0.42; }
.btc-crit.over-before::before,
.btc-crit.over-after::after {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    height: 2px;
    background: var(--brand);
    border-radius: 2px;
}
.btc-crit.over-before::before { top: -1px; }
.btc-crit.over-after::after { bottom: -1px; }
.btc-crit.dragging .btc-grip { opacity: 1; cursor: grabbing; }
.btc-group-h.over { background: var(--brand-soft); box-shadow: inset 0 -2px 0 var(--brand); }



@keyframes btcFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes btcRise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.btc-scrim {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-5);
    background: var(--mud-palette-overlay-dark);
    animation: btcFade 200ms var(--ease-out) both;
}
.btc-modal {
    display: flex;
    flex-direction: column;
    width: min(560px, 100%);
    max-height: calc(100vh - 48px);
    background: var(--bg-surface);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-pop);
    animation: btcRise 200ms var(--ease-out) both;
}
.btc-modal.wide { width: min(760px, 100%); }
.btc-modal-head {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 22px 14px;
    border-bottom: 1px solid var(--border-1);
}
.btc-modal-t { font-size: 17px; font-weight: 700; color: var(--fg-1); line-height: 1.3; letter-spacing: -0.005em; }
.btc-modal-s { margin-top: 3px; font-size: 12.5px; color: var(--fg-3); }
.btc-modal-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--fg-3);
    cursor: pointer;
    transition: all 120ms;
}
.btc-modal-x:hover { background: var(--slate-100); color: var(--fg-1); }
.btc-modal-x svg { width: 17px; height: 17px; }
.btc-modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 18px 22px; }
.btc-modal-foot {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 22px;
    border-top: 1px solid var(--border-1);
    background: var(--slate-25);
    border-radius: 0 0 var(--radius-card) var(--radius-card);
}

.btc-hint { margin-right: auto; font-size: 12px; color: var(--fg-4); }
.btc-hint b { font-family: var(--font-mono); }

.btc-modal .btc-seg { width: 100%; }
.btc-modal .btc-seg button { flex: 1 1 0; white-space: nowrap; }


.btc-dlg .btc-seg { width: 100%; }
.btc-dlg .btc-seg button { flex: 1 1 0; white-space: nowrap; }


.btc-fields { display: grid; gap: var(--space-4); }
.btc-frow { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.btc-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.btc-label { font-size: 12px; font-weight: 600; color: var(--fg-2); }
.btc-label .req { color: var(--error-500); }


.btc-help {
    position: relative;
    display: inline-flex;
    vertical-align: middle;
    margin-left: 5px;
    font-size: 11.5px;
    font-weight: 400;
    color: var(--fg-4);
    line-height: 1.45;
}

.btc-input,
.btc-ta {
    width: 100%;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--border-2);
    border-radius: var(--radius-input);
    background: var(--bg-surface);
    font-family: var(--font-sans);
    font-size: 13.5px;
    color: var(--fg-1);
    outline: 0;
    transition: border-color 120ms, box-shadow 120ms;
}
.btc-ta { height: auto; min-height: 68px; padding: 9px 12px; line-height: 1.5; resize: vertical; }
.btc-input::placeholder, .btc-ta::placeholder { color: var(--fg-4); }
.btc-input:focus, .btc-ta:focus { border-color: var(--brand); box-shadow: var(--app-focus-ring); }
.btc-input.mono { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.02em; }


.btc-pickrow { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.btc-pick {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 12px 14px;
    text-align: left;
    border: 1px solid var(--border-2);
    border-radius: var(--radius-input);
    background: var(--bg-surface);
    font-family: var(--font-sans);
    cursor: pointer;
    transition: all 120ms;
}
.btc-pick:hover { border-color: var(--border-strong); }
.btc-pick.on { border-color: var(--brand); background: var(--brand-soft); box-shadow: var(--app-focus-ring); }
.btc-pick-t { font-size: 13.5px; font-weight: 600; color: var(--fg-1); }
.btc-pick.on .btc-pick-t { color: var(--brand); }
.btc-pick-s { font-size: 11.5px; color: var(--fg-3); line-height: 1.45; }


.btc-dlg .mud-dialog-title { padding: 18px 22px 14px; border-bottom: 1px solid var(--border-1); }
.btc-dlg .mud-dialog-content { padding: 18px 22px; }
.btc-dlg .mud-dialog-actions {
    gap: 10px;
    padding: 14px 22px;
    border-top: 1px solid var(--border-1);
    background: var(--slate-25);
}


.btc-bb-anhbtn { display: inline-flex; }


@media (min-width: 601px) {
    .btc-bb-shot.app-dialog-fixed-height { height: auto; }
}


.btc-bb-loc {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin: 0 0 14px;
    padding: 11px 13px;
    border: 1px solid var(--border-1);
    border-radius: var(--radius-md);
    background: var(--slate-25);
}
.btc-bb-loc-tim {
    flex: 1 1 240px;
    min-width: 0;
    padding: 7px 11px;
    border: 1px solid var(--border-1);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--fg-1);
}
.btc-bb-loc-tim:focus { border-color: var(--brand); box-shadow: var(--app-focus-ring); outline: 0; }
.btc-bb-loc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.btc-bb-chip {
    padding: 5px 11px;
    border: 1px solid var(--border-1);
    border-radius: var(--radius-pill);
    background: var(--bg-surface);
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 600;
    color: var(--fg-3);
    cursor: pointer;
    transition: background 120ms var(--ease-in-out);
}
.btc-bb-chip:hover { background: var(--slate-50); }
.btc-bb-chip.on { border-color: var(--brand); background: var(--brand); color: var(--slate-0); }

.btc-bb-loc-ngay { display: flex; gap: 8px; }
.btc-bb-loc-ngay > * { width: 148px; }
.btc-bb-loc-xoa {
    margin-left: auto;
    padding: 5px 11px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 600;
    color: var(--brand);
    cursor: pointer;
}
.btc-bb-loc-xoa:hover { background: var(--brand-soft); }

.btc-bb-trang {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
    padding: 10px 2px 2px;
}
.btc-bb-trang-t { flex: 1 1 auto; font-size: 12px; color: var(--fg-4); }
.btc-bb-trang-s { font-family: var(--font-mono); font-size: 12px; color: var(--fg-3); }
.btc-bb-trang-n {
    padding: 6px 12px;
    border: 1px solid var(--border-1);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 600;
    color: var(--fg-2);
    cursor: pointer;
}
.btc-bb-trang-n:hover:not(:disabled) { background: var(--slate-50); }
.btc-bb-trang-n:disabled { opacity: 0.45; cursor: default; }


.btc-bb-buoc { font-size: 13px; font-weight: 600; color: var(--fg-1); line-height: 1.35; }
.btc-bb-dinhdanh {
    margin-top: 1px;
    font-size: 11.5px;
    color: var(--fg-4);
    line-height: 1.4;
    overflow-wrap: anywhere;
}



.btc-bb-snapchip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: var(--space-2);
    padding: 2px var(--space-2);
    border-radius: var(--radius-pill);
    background: var(--status-info-bg);
    color: var(--status-info-fg);
    font-size: 11px;
    font-weight: 600;
}

.btc-bb-round { margin-bottom: 14px; border: 1px solid var(--border-1); border-radius: 12px; overflow: hidden; }
.btc-bb-round:last-child { margin-bottom: 0; }

.btc-bb-round.dau { border-color: var(--border-strong); box-shadow: var(--shadow-xs); }

.btc-bb-rh {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    background: var(--slate-25);
    border-bottom: 1px solid var(--border-1);
}

.btc-bb-rh { cursor: pointer; user-select: none; }
.btc-bb-rh:hover { background: var(--slate-50); }
.btc-bb-rh:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }

.btc-bb-rh[aria-expanded="false"] { border-bottom: 0; }

.btc-bb-gapdem { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
.btc-bb-gap {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--fg-4);
    transition: transform 140ms var(--ease-in-out);
}
.btc-bb-gap svg { width: 16px; height: 16px; }
.btc-bb-gap.mo { transform: rotate(180deg); }
.btc-bb-lan {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    height: 22px;
    padding: 0 9px;
    border: 1px solid var(--border-2);
    border-radius: var(--radius-pill);
    background: var(--bg-surface);
    font-size: 11px;
    font-weight: 700;
    color: var(--fg-3);
    font-variant-numeric: tabular-nums;
}
.btc-bb-who { font-size: 13px; font-weight: 600; color: var(--fg-1); }
.btc-bb-when { margin-top: 2px; font-size: 11.5px; color: var(--fg-3); font-variant-numeric: tabular-nums; }
.btc-bb-verdict {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.btc-bb-verdict.ok   { background: var(--status-success-bg); color: var(--status-success-fg); }
.btc-bb-verdict.no   { background: var(--status-error-bg);   color: var(--status-error-fg); }

.btc-bb-verdict.cho  { background: var(--slate-100);          color: var(--fg-3); }
.btc-bb-verdict.nhap { background: var(--status-warning-bg);  color: var(--status-warning-fg); }


.btc-bb-ketluan { padding: 12px 15px; }

.btc-bb-ketluan + .btc-bb-ketluan:not(.bo-qua) { padding-top: 0; }

.btc-bb-ketluan.bo-qua {
    margin: 0 0 12px;
    padding: 10px 15px;
    border: 0;
    border-radius: 0;
    background: var(--slate-25);
}

.btc-bb-rh + .btc-bb-ketluan.bo-qua { margin-top: 12px; }
.btc-bb-kl-l {
    margin-bottom: 5px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--fg-4);
}
.btc-bb-kl-t { font-size: 13.5px; color: var(--fg-1); line-height: 1.55; text-wrap: pretty; }


.btc-bb-diem {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 15px;
    border-top: 1px solid var(--border-1);
    border-bottom: 1px solid var(--border-1);
    background: var(--slate-25);
}
.btc-bb-diem.ok  { background: var(--status-success-bg); }
.btc-bb-diem.bad { background: var(--status-error-bg); }

.btc-bb-rh + .btc-bb-diem { border-top: 0; }
.btc-bb-diem-v { font-size: 20px; font-weight: 700; color: var(--fg-1); font-variant-numeric: tabular-nums; line-height: 1.1; }
.btc-bb-diem.ok  .btc-bb-diem-v { color: var(--success-700); }
.btc-bb-diem.bad .btc-bb-diem-v { color: var(--error-700); }
.btc-bb-diem-v small { margin-left: 1px; font-size: 11px; font-weight: 600; color: var(--fg-4); }
.btc-bb-diem-d { font-size: 11.5px; color: var(--fg-3); font-variant-numeric: tabular-nums; cursor: help; }

.btc-bb-dem { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.btc-bb-diem.codiem .btc-bb-dem { margin-left: auto; }
.btc-bb-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 22px;
    padding: 0 9px;
    border-radius: var(--radius-pill);
    font-size: 11.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.btc-bb-chip.dat   { background: var(--bg-surface); color: var(--status-success-fg); }
.btc-bb-chip.khong { background: var(--bg-surface); color: var(--status-error-fg); }
.btc-bb-chip.na    { background: var(--bg-surface); color: var(--fg-3); }


.btc-bb-tatca {
    flex-shrink: 0;
    margin-left: 10px;
    padding: 5px 11px;
    border: 1px solid var(--border-1);
    border-radius: var(--radius-pill);
    background: var(--bg-surface);
    font-family: var(--font-sans);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--brand);
    cursor: pointer;
    transition: background 120ms var(--ease-in-out);
}
.btc-bb-tatca:hover { background: var(--brand-soft); }

.btc-bb-diem:not(.codiem) .btc-bb-tatca { margin-left: auto; }


.btc-bb-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 120px 84px 116px;
    gap: 14px;
    align-items: baseline;
    padding: 10px 15px;
    border-bottom: 1px solid var(--border-1);
}
.btc-bb-row:last-child { border-bottom: 0; }

.btc-bb-row:not(.btc-bb-hd) { transition: background 120ms var(--ease-in-out); }
.btc-bb-row:not(.btc-bb-hd):hover { background: var(--slate-50); }

.btc-bb-hd {
    padding-top: 8px;
    padding-bottom: 8px;
    background: var(--slate-25);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fg-4);
}
.btc-bb-hd span:last-child { text-align: right; }

.btc-bb-c-yc { font-size: 12px; color: var(--fg-3); line-height: 1.45; }

.btc-bb-c-val { font-size: 12px; color: var(--fg-4); }
.btc-bb-c-val .btc-bb-val { margin-left: 0; }

.btc-bb-c-kq { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.btc-bb-t { font-size: 13px; color: var(--fg-1); line-height: 1.45; }

.btc-bb-so {
    margin-right: 7px;
    font-family: var(--font-mono);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--fg-4);
}

.btc-bb-val {
    display: inline-block;
    margin-left: var(--space-2);
    vertical-align: 1px;
    padding: 1.5px 6px;
    border-radius: var(--radius-xs);
    background: var(--slate-100);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    color: var(--fg-2);
    font-variant-numeric: tabular-nums;
}

.btc-bb-note {
    margin-top: 5px;
    padding: 7px 10px;
    border-left: 2px solid var(--border-2);
    border-radius: var(--radius-sm);
    background: var(--slate-50);
    font-size: 12px;
    color: var(--fg-2);
    line-height: 1.5;
}

.btc-bb-file {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding: 3px 9px;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--slate-100);
    font-family: var(--font-sans);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--fg-3);
    cursor: pointer;
    transition: background 120ms var(--ease-in-out);
}
.btc-bb-file svg { width: 12px; height: 12px; }
.btc-bb-file:hover,
.btc-bb-file.mo { background: var(--brand-soft); color: var(--brand); }

.btc-bb-file svg:last-child { transition: transform 140ms var(--ease-in-out); }
.btc-bb-file.mo svg:last-child { transform: rotate(180deg); }


.btc-bb-teps {
    display: flex;
    flex-direction: column;
    margin-top: 7px;
    border: 1px solid var(--border-1);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.btc-bb-tep {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 10px;
    border: 0;
    border-bottom: 1px solid var(--border-1);
    background: var(--bg-surface);
    font-family: var(--font-sans);
    font-size: 12px;
    text-align: left;
    color: var(--brand);
    cursor: pointer;
}
.btc-bb-tep:last-child { border-bottom: 0; }
.btc-bb-tep:hover { background: var(--slate-50); text-decoration: underline; }
.btc-bb-tep svg { width: 13px; height: 13px; flex-shrink: 0; }

.btc-bb-tep.mat { color: var(--fg-4); cursor: default; }
.btc-bb-tep.mat:hover { background: var(--bg-surface); text-decoration: none; }
.btc-bb-tep-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btc-bb-tep-m { margin-left: auto; flex-shrink: 0; font-size: 11px; color: var(--fg-4); }


.btc-bb-res {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 3px 9px;
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}
.btc-bb-res.dat   { background: var(--status-success-bg); color: var(--status-success-fg); }
.btc-bb-res.khong { background: var(--status-error-bg);   color: var(--status-error-fg); }
.btc-bb-res.na    { background: var(--slate-100);         color: var(--fg-3); }


.btc-bb-none {
    padding: 12px 15px;
    font-size: 12.5px;
    color: var(--fg-4);
    line-height: 1.5;
}


.btc-bb-nhom { border-bottom: 1px solid var(--border-1); }
.btc-bb-nhom:last-child { border-bottom: 0; }
.btc-bb-nh {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 15px;
    cursor: pointer;
    user-select: none;
    transition: background 120ms var(--ease-in-out);
}
.btc-bb-nh:hover { background: var(--slate-50); }
.btc-bb-nh:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.btc-bb-nh[aria-expanded="true"] { background: var(--slate-25); border-bottom: 1px solid var(--border-1); }

.btc-bb-nh-gap {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--fg-4);
    transform: rotate(-90deg);
    transition: transform 140ms var(--ease-in-out);
}
.btc-bb-nh-gap svg { width: 15px; height: 15px; }
.btc-bb-nh-gap.mo { transform: rotate(0deg); }
.btc-bb-nh-so {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: var(--radius-xs);
    background: var(--brand);
    color: var(--slate-0);
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.btc-bb-nh-t {
    min-width: 0;
    flex: 1 1 auto;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fg-1);
}
.btc-bb-nh-d {
    flex-shrink: 0;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--fg-4);
}

.btc-bb-nhom .btc-bb-row { position: relative; padding-left: 70px; }
.btc-bb-nhom .btc-bb-row:not(.btc-bb-hd)::before {
    content: '';
    position: absolute;
    left: 44px;
    top: 0;
    bottom: 0;
    border-left: 1px solid var(--border-1);
}
.btc-bb-nhom .btc-bb-row:not(.btc-bb-hd)::after {
    content: '';
    position: absolute;
    left: 44px;
    top: 20px;
    width: 12px;
    border-top: 1px solid var(--border-1);
}

.btc-bb-nhom .btc-bb-row:last-child:not(.btc-bb-hd)::before { bottom: auto; height: 20px; }


.btc-bb-rest {
    display: block;
    width: 100%;
    padding: 10px 15px;
    text-align: center;
    border: 0;
    border-top: 1px solid var(--border-1);
    background: var(--slate-25);
    font-family: var(--font-sans);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--brand);
    cursor: pointer;
}
.btc-bb-rest:hover { background: var(--slate-50); }




.btc-kindsel {
    height: 21px;
    padding: 0 18px 0 7px;
    border: 1px solid var(--border-1);
    border-radius: var(--radius-xs);
    background: var(--slate-50);
    color: var(--fg-3);
    font-family: var(--font-sans);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--fg-4) 50%),
                      linear-gradient(135deg, var(--fg-4) 50%, transparent 50%);
    background-position: calc(100% - 9px) 9px, calc(100% - 6px) 9px;
    background-size: 3px 3px, 3px 3px;
    background-repeat: no-repeat;
    transition: all 120ms;
}
.btc-kindsel:hover { border-color: var(--border-2); color: var(--fg-2); }
.btc-kindsel.diem {
    background: var(--brand-soft);
    border-color: var(--border-2);                                    
    border-color: color-mix(in srgb, var(--brand) 26%, transparent);
    color: var(--brand);
}


.btc-numrow {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: var(--space-2);
    padding: var(--space-2) 10px;
    border: 1px solid var(--border-1);
    border-radius: var(--radius-sm);
    background: var(--slate-25);
}

.btc-numrow.in-modal { margin-top: 0; flex-wrap: wrap; gap: 10px 14px; }
.btc-numf { display: inline-flex; align-items: center; gap: 6px; }
.btc-numf-l { font-size: 11px; font-weight: 600; color: var(--fg-3); white-space: nowrap; }
.btc-numf input,
.btc-numf select {
    width: 62px;
    height: 26px;
    padding: 0 7px;
    border: 1px solid var(--border-2);
    border-radius: var(--radius-xs);
    background: var(--bg-surface);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    color: var(--fg-1);
    font-variant-numeric: tabular-nums;
    outline: 0;
}
.btc-numf select {
    width: auto;
    padding-right: 18px;
    font-family: var(--font-sans);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--fg-4) 50%),
                      linear-gradient(135deg, var(--fg-4) 50%, transparent 50%);
    background-position: calc(100% - 9px) 11px, calc(100% - 6px) 11px;
    background-size: 3px 3px, 3px 3px;
    background-repeat: no-repeat;
}
.btc-numf input.wide { width: 84px; font-family: var(--font-sans); font-weight: 500; }
.btc-numf input:focus, .btc-numf select:focus { border-color: var(--brand); box-shadow: var(--app-focus-ring); }
.btc-numf-s { font-size: 11px; color: var(--fg-4); }


.btc-numnote {
    flex: 1 1 190px;
    min-width: 150px;
    text-align: right;
    font-size: 11px;
    color: var(--fg-4);
    line-height: 1.45;
}


.btc-cfg-diem { display: inline-flex; align-items: center; gap: var(--space-2); }
.btc-cfg-diem input[type="number"] {
    width: 68px;
    height: 28px;
    padding: 0 var(--space-2);
    border: 1px solid var(--border-2);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    font-family: var(--font-mono);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--fg-1);
    font-variant-numeric: tabular-nums;
    outline: 0;
}
.btc-cfg-diem input[type="number"]:disabled { opacity: 0.4; }
.btc-cfg-diem input[type="number"]:focus { border-color: var(--brand); box-shadow: var(--app-focus-ring); }
.btc-cfg-hint { margin-top: 5px; font-size: 11px; color: var(--fg-4); line-height: 1.45; }


.btc-pv-num {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-top: 7px;
}
.btc-pv-num input {
    width: 74px;
    height: 27px;
    padding: 0 var(--space-2);
    border: 1px solid var(--border-2);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    font-family: var(--font-mono);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--fg-1);
    font-variant-numeric: tabular-nums;
    outline: 0;
}
.btc-pv-num input:focus { border-color: var(--brand); box-shadow: var(--app-focus-ring); }
.btc-pv-unit { font-size: 11.5px; color: var(--fg-3); font-weight: 600; }
.btc-pv-cond { font-size: 11px; color: var(--fg-4); font-variant-numeric: tabular-nums; }


.btc-pv-ro {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-top: 7px;
}
.btc-pv-ro-txt {
    font-size: 12.5px;
    color: var(--fg-2);
    white-space: pre-wrap;
}
.btc-pv-ro-txt.trong { font-style: italic; color: var(--fg-4); }


.btc-verdict {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px var(--space-2);
    border-radius: var(--radius-pill);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
}
.btc-verdict.dat   { background: var(--status-success-bg); color: var(--success-700); }
.btc-verdict.khong { background: var(--status-warning-bg); color: var(--status-warning-fg); }
.btc-verdict.cho   { background: var(--slate-50);          color: var(--fg-4); }
.btc-verdict.na    { background: var(--slate-100);         color: var(--fg-3); }
.btc-verdict svg   { width: 12px; height: 12px; flex-shrink: 0; }


.btc-na-btn {
    height: 27px;
    padding: 0 9px;
    border: 1px solid var(--border-2);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    color: var(--fg-3);
    font-family: var(--font-sans);
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 120ms;
}
.btc-na-btn:hover { border-color: var(--border-strong); color: var(--fg-1); }
.btc-na-btn.on { background: var(--slate-100); border-color: var(--border-strong); color: var(--fg-2); }


.btc-score {
    flex: 0 0 auto;
    padding: 10px 16px 12px;
    border-bottom: 1px solid var(--border-1);
    background: var(--slate-25);
}
.btc-score-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.btc-score-l { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--fg-4); }
.btc-score-v { font-size: 15px; font-weight: 700; color: var(--fg-1); font-variant-numeric: tabular-nums; }
.btc-score-v.ok  { color: var(--success-700); }
.btc-score-v.bad { color: var(--status-error-fg); }
.btc-score-v.cho { color: var(--fg-4); }
.btc-score-v small { margin-left: 3px; font-size: 11px; font-weight: 600; color: var(--fg-4); }

.btc-score-track {
    position: relative;
    height: 7px;
    margin-top: var(--space-2);
    border-radius: 4px;
    background: var(--slate-100);
    overflow: hidden;
}
.btc-score-fill {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: 4px;
    background: var(--success-500);
    transition: width 160ms var(--ease-in-out);
}
.btc-score-fill.bad { background: var(--error-500); }

.btc-score-mark {
    position: absolute;
    top: -3px;
    bottom: -3px;
    width: 2px;
    border-radius: 1px;
    background: var(--fg-2);
}
.btc-score-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 6px;
    font-size: 11px;
    color: var(--fg-4);
    font-variant-numeric: tabular-nums;
}
.btc-score-mau b { color: var(--fg-2); font-weight: 700; }



.btc-help-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    padding: 0;
    border: 1px solid var(--border-2);
    border-radius: 50%;
    background: var(--bg-surface);
    color: var(--fg-4);
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    cursor: help;
    transition: all 120ms var(--ease-in-out);
}
.btc-help-ic:hover,
.btc-help:focus-within .btc-help-ic,
.btc-help.pin .btc-help-ic { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }

.btc-help-pop {
    position: absolute;
    z-index: 40;
    display: none;
    top: calc(100% + 7px);
    left: -10px;
    width: 272px;
    padding: 10px 12px;
    border: 1px solid var(--border-2);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    box-shadow: var(--shadow-pop);
    
    font-size: 11.5px;
    font-weight: 400;
    line-height: 1.55;
    color: var(--fg-2);
    text-align: left;
    text-transform: none;
    letter-spacing: 0;
    white-space: normal;
}
.btc-help:hover .btc-help-pop,
.btc-help:focus-within .btc-help-pop,
.btc-help.pin .btc-help-pop { display: block; }
.btc-help.r .btc-help-pop { left: auto; right: -10px; }
.btc-help.up .btc-help-pop { top: auto; bottom: calc(100% + 7px); }
.btc-help-pop p { margin: 0 0 7px; }
.btc-help-pop p:last-child { margin-bottom: 0; }
.btc-help-pop em { font-style: normal; font-weight: 700; color: var(--fg-1); }



.btc-cfg-used { margin-left: auto; align-self: center; }
.btc-usedin-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 28px;
    padding: 0 11px;
    border: 1px solid var(--border-2);
    border-radius: var(--radius-pill);
    background: var(--bg-surface);
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 600;
    color: var(--fg-2);
    cursor: pointer;
    transition: all 120ms var(--ease-in-out);
}
.btc-usedin-btn:hover { border-color: var(--border-strong); color: var(--fg-1); background: var(--slate-50); }
.btc-usedin-btn.on {
    background: var(--brand-soft);
    color: var(--brand);
    border-color: var(--border-2);                                    
    border-color: color-mix(in srgb, var(--brand) 26%, transparent);
}
.btc-usedin-btn > svg { width: 14px; height: 14px; flex-shrink: 0; }
.btc-usedin-btn .btc-caret { width: 10px; height: 10px; transition: transform 140ms var(--ease-in-out); }
.btc-usedin-btn.on .btc-caret { transform: rotate(180deg); }

@keyframes btcUsedIn { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.btc-usedin-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--border-1);
    animation: btcUsedIn 150ms ease-out;
}
.btc-usedin-empty { font-size: 12px; color: var(--fg-4); line-height: 1.5; }
.btc-usedin-cap {
    align-self: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fg-4);
}

.btc-usedin-close {
    margin-left: auto;
    align-self: center;
    padding: 2px;
    border: 0;
    background: none;
    font-family: var(--font-sans);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--fg-4);
    cursor: pointer;
    transition: color 110ms;
}
.btc-usedin-close:hover { color: var(--brand); }



.btc-addgroup { padding: 12px 18px 16px; }

.btc-addgroup.top {
    padding: 12px 18px;
    border-bottom: 1px solid var(--border-1);
    background: var(--slate-25);
    animation: btcUsedIn 150ms ease-out;
}

.btc-addgroup.bare { padding: var(--space-4) 0 0; }

.btc-addgroup-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 32px;
    padding: 0 13px;
    border: 1px dashed var(--border-2);
    border-radius: var(--radius-button);
    background: none;
    font-family: var(--font-sans);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--fg-3);
    cursor: pointer;
    transition: all 120ms var(--ease-in-out);
}
.btc-addgroup-btn:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.btc-addgroup-btn svg { width: 15px; height: 15px; }

.btc-addgroup-in { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.btc-addgroup-in input {
    flex: 1 1 200px;
    min-width: 0;
    height: 34px;
    padding: 0 11px;
    border: 1px solid var(--brand);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--fg-1);
    outline: 0;
    box-shadow: var(--app-focus-ring);
}
.btc-addgroup-in input::placeholder { color: var(--fg-4); }
.btc-addgroup-err { flex: 1 1 100%; font-size: 11.5px; color: var(--status-error-fg); }


.btc-group-h .btc-group-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: var(--space-2);
    width: 20px;
    height: 20px;
    border: 1px solid transparent;
    border-radius: var(--radius-xs);
    background: none;
    color: var(--fg-4);
    cursor: pointer;
    transition: all 120ms;
}
.btc-group-h .btc-group-x:hover {
    border-color: var(--error-500);
    color: var(--status-error-fg);
    background: var(--status-error-bg);
}
.btc-group-h .btc-group-x svg { width: 13px; height: 13px; }



.btc-group-no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: var(--radius-xs);
    background: var(--brand);
    color: var(--brand-on);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.btc-crit-b {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 7px;
    align-items: baseline;
}
.btc-crit-no {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 11.5px;
    font-weight: 700;
    color: var(--fg-4);
    font-variant-numeric: tabular-nums;
}
.btc-pv-no {
    display: inline-block;
    min-width: 20px;
    margin-right: 6px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    color: var(--fg-4);
    font-variant-numeric: tabular-nums;
}

.btc-pv-gh .btc-pv-no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 20px;
    height: 20px;
    margin-right: 0;
    padding: 0 5px;
    border-radius: var(--radius-xs);
    background: var(--brand);
    color: var(--brand-on);
    font-size: 11px;
}



.btc-group-name-btn {
    min-width: 0;
    margin: 0;
    padding: 2px 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border: 0;
    border-radius: var(--radius-xs);
    background: none;
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: text;
    transition: background 120ms;
}
.btc-group-name-btn:hover { background: var(--slate-100); }

.btc-group-h .btc-group-pen {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    width: 26px;
    height: 26px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--fg-4);
    opacity: 0;
    cursor: pointer;
    transition: all 120ms;
}
.btc-group-h:hover .btc-group-pen { opacity: 1; }
.btc-group-h .btc-group-pen:hover { border-color: var(--border-2); color: var(--brand); background: var(--bg-surface); }
.btc-group-h .btc-group-pen svg { width: 16px; height: 16px; }

.btc-group-edit { display: flex; align-items: center; gap: var(--space-2); flex: 1 1 auto; min-width: 0; }
.btc-group-edit input {
    flex: 1 1 auto;
    min-width: 0;
    height: 30px;
    padding: 0 10px;
    border: 1px solid var(--brand);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    color: var(--fg-1);
    text-transform: none;
    letter-spacing: 0;
    outline: 0;
    box-shadow: var(--app-focus-ring);
}

.btc-mini {
    height: 28px;
    padding: 0 10px;
    border: 1px solid var(--border-2);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    color: var(--fg-2);
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
    cursor: pointer;
    transition: all 120ms;
}
.btc-mini:hover { border-color: var(--border-strong); color: var(--fg-1); }
.btc-mini.primary { background: var(--brand); border-color: var(--brand); color: var(--brand-on); }
.btc-mini.primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
.btc-mini:disabled { opacity: 0.5; cursor: not-allowed; }


.btc-crit.dangsua { background: var(--brand-soft); }
.btc-crit-edit { display: flex; flex-direction: column; gap: var(--space-2); margin-top: 2px; }
.btc-crit-edit textarea {
    width: 100%;
    padding: var(--space-2) 10px;
    border: 1px solid var(--border-2);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    font-family: var(--font-sans);
    font-size: 13px;
    line-height: 1.45;
    color: var(--fg-1);
    outline: 0;
    resize: vertical;
}
.btc-crit-edit textarea:focus { border-color: var(--brand); box-shadow: var(--app-focus-ring); }
.btc-crit-edit-l {
    margin-bottom: -4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--fg-4);
}
.btc-crit-edit-acts { display: flex; align-items: center; gap: var(--space-2); }
.btc-crit-edit-hint { margin-left: auto; font-size: 11px; color: var(--fg-4); }



.btc-opt { position: relative; display: inline-flex; }


.btc-optscrim { position: fixed; inset: 0; z-index: 55; background: transparent; }

@keyframes btcOptIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.btc-optmenu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 60;
    min-width: 232px;
    padding: 5px;
    border: 1px solid var(--border-2);
    border-radius: 10px;
    background: var(--bg-surface);
    box-shadow: var(--shadow-pop);
    animation: btcOptIn 130ms ease-out;
}
.btc-optmenu.crit { min-width: 208px; }

.btc-optitem {
    display: flex;
    align-items: center;
    
    justify-content: flex-start;
    gap: 9px;
    width: 100%;
    padding: var(--space-2) 10px;
    text-align: left;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    color: var(--fg-2);
    cursor: pointer;
    transition: background 110ms, color 110ms;
}
.btc-optitem:hover:not(:disabled) { background: var(--slate-50); color: var(--fg-1); }
.btc-optitem:disabled { opacity: 0.45; cursor: not-allowed; }
.btc-optitem svg { width: 15px; height: 15px; color: var(--fg-4); flex-shrink: 0; }
.btc-optitem:hover:not(:disabled) svg { color: var(--brand); }
.btc-optitem.danger { color: var(--status-error-fg); }
.btc-optitem.danger svg { color: var(--error-500); }
.btc-optitem.danger:hover:not(:disabled) { background: var(--status-error-bg); color: var(--status-error-fg); }
.btc-optitem.danger:hover:not(:disabled) svg { color: var(--status-error-fg); }


.btc-opthint { padding: 0 10px 7px 34px; font-size: 11px; color: var(--fg-4); line-height: 1.45; }
.btc-optsep { height: 1px; margin: 5px var(--space-2); background: var(--border-1); }

.btc-optbtn .btc-caret { width: 11px; height: 11px; transition: transform 140ms var(--ease-in-out); }
.btc-optbtn.on .btc-caret { transform: rotate(180deg); }
.btc-optbtn.on { border-color: var(--border-strong); background: var(--slate-50); color: var(--fg-1); }


.btc-group-tog {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 5px;
    background: none;
    color: var(--fg-4);
    cursor: pointer;
    transition: color 110ms, background 110ms;
}
.btc-group-tog:hover { color: var(--fg-2); background: var(--slate-100); }
.btc-group-tog svg { width: 14px; height: 14px; transition: transform 150ms var(--ease-in-out); }
.btc-group-tog.dong svg { transform: rotate(-90deg); }

.btc-group-add {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    height: 26px;
    padding: 0 10px;
    border: 1px solid var(--border-2);
    border-radius: var(--radius-pill);
    background: var(--bg-surface);
    font-family: var(--font-sans);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--fg-3);
    white-space: nowrap;
    cursor: pointer;
    transition: all 120ms var(--ease-in-out);
}
.btc-group-add:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.btc-group-add svg { width: 13px; height: 13px; }


.btc-allcaret { width: 12px; height: 12px; transition: transform 150ms var(--ease-in-out); }
.btc-allcaret.dong { transform: rotate(-90deg); }


.btc-group > .btc-crit,
.btc-group > .btc-quick { position: relative; padding-left: 46px; }
.btc-group > .btc-crit::before,
.btc-group > .btc-quick::before {
    content: '';
    position: absolute;
    left: 26px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--border-2);
}
.btc-group > .btc-crit::after,
.btc-group > .btc-quick::after {
    content: '';
    position: absolute;
    left: 26px;
    top: 23px;
    width: 13px;
    height: 1px;
    background: var(--border-2);
}

.btc-group > .btc-quick::before { bottom: auto; height: 22px; }
.btc-group > .btc-quick::after { top: 22px; }
.btc-group > .btc-crit:hover::before,
.btc-group > .btc-crit:hover::after { background: var(--border-strong); }


.btc-crit-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 6px; margin-top: 7px; }
.btc-sum {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 var(--space-2);
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.btc-sum.req  { background: var(--brand-soft); color: var(--brand); }
.btc-sum.kind { background: var(--slate-100);  color: var(--fg-2); }
.btc-sum.mut  { background: none; color: var(--fg-4); padding: 0 2px; }
.btc-sum.mut::before { content: '·'; margin-right: 6px; color: var(--border-strong); }




.btc-empty { padding: 28px 12px; text-align: center; font-size: 13px; color: var(--fg-4); }

.btc-empty-big { padding: 40px 20px; text-align: center; }
.btc-empty-t { font-size: 13.5px; font-weight: 600; color: var(--fg-2); }
.btc-empty-s { margin-top: 4px; font-size: 12.5px; color: var(--fg-4); }
.btc-empty-s b { color: var(--fg-3); font-weight: 700; }

.btc-pv-empty { padding: 30px 18px; text-align: center; font-size: 12.5px; color: var(--fg-4); line-height: 1.55; }


.btc-grow { flex: 1 1 auto; min-width: 0; }
.btc-min0 { min-width: 0; }


.btc-scrollx { overflow-x: auto; -webkit-overflow-scrolling: touch; }



.btc-tk { display: flex; flex-direction: column; }
.btc-tk-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid var(--border-1);
}
.btc-tk-row:last-child { border-bottom: 0; }
.btc-tk-nd { font-size: 13.5px; font-weight: 600; color: var(--fg-1); line-height: 1.4; }
.btc-tk-meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-top: 3px;
    font-size: 12.5px;
    color: var(--fg-4);
}

.btc-tk-so {
    flex: 0 0 auto;
    min-width: 62px;
    text-align: right;
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--fg-3);
}

.btc-tk-so.req  { color: var(--error-700); }
.btc-tk-so.warn { color: var(--warning-700); }
.btc-tk-so.mut  { color: var(--fg-4); }
.btc-tk-chugiai { margin: var(--space-4) 0 0; }


.btc-duyet-nhap { margin-right: auto; }



.btc-duyet-dlg .btc-col-preview {
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    max-height: none;
}

.btc-duyet-dlg .btc-pv-list { overflow: visible; }

.btc-duyet-dlg .btc-pv-bar,
.btc-duyet-dlg .btc-pv-foot { padding-left: 0; padding-right: 0; }
.btc-duyet-dlg .btc-pv-foot { border-bottom: 0; }


.btc-pv-tep {
    grid-column: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 6px;
    font-size: 12.5px;
}
.btc-pv-tep svg { width: 14px; height: 14px; flex: 0 0 auto; }


.btc-pv-tep-add {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border: 1px dashed var(--border-2); border-radius: 8px;
    color: var(--fg-2); cursor: pointer; position: relative; overflow: hidden;
}
.btc-pv-tep-add:hover { border-color: var(--brand); color: var(--brand); }
.btc-pv-tep-add input[type="file"] { position: absolute; width: 0; height: 0; opacity: 0; }

.btc-pv-tep-ok {
    display: inline-flex; align-items: center; gap: 6px; min-width: 0;
    padding: 4px 10px; border-radius: 8px;
    background: var(--status-success-bg); color: var(--success-700);
}

.btc-pv-tep-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }

.btc-pv-tep-x {
    border: 1px solid var(--border-2); background: none; border-radius: 8px;
    padding: 4px 10px; color: var(--fg-3); cursor: pointer; font-size: 12.5px;
}
.btc-pv-tep-x:hover:not(:disabled) { border-color: var(--error-700); color: var(--error-700); }
.btc-pv-tep-x:disabled { opacity: .5; cursor: default; }

.btc-pv-tep-dang { color: var(--fg-3); }


.btc-duyet-dlg .btc-pv-btns {
    position: sticky;
    bottom: 0;
    z-index: 1;
    padding: var(--space-2) 0;
    margin-bottom: calc(var(--space-2) * -1);
    background: var(--bg-surface);
    box-shadow: 0 -8px 12px -8px rgb(0 0 0 / 18%);
}



.btc-hd { font-size: 14px; line-height: 1.6; color: var(--fg-2); }
.btc-hd b { color: var(--fg-1); font-weight: 700; }
.btc-hd i { font-style: normal; color: var(--fg-1); }

.btc-hd-lead {
    margin: 0 0 var(--space-4);
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--bg-sunken);
}
.btc-hd-h {
    margin: var(--space-5) 0 var(--space-2);
    font-size: 15px;
    font-weight: 700;
    color: var(--fg-1);
    letter-spacing: -0.005em;
}
.btc-hd-h:first-of-type { margin-top: var(--space-4); }
.btc-hd-p { margin: 0 0 var(--space-3); }
.btc-hd-ul, .btc-hd-ol { margin: 0 0 var(--space-3); padding-left: 20px; }
.btc-hd-ul li, .btc-hd-ol li { margin-bottom: 7px; }


.btc-hd-tip {
    margin: 0 0 var(--space-3);
    padding: 10px 14px;
    border-left: 3px solid var(--brand);
    border-radius: 0 8px 8px 0;
    background: var(--brand-soft);
    color: var(--fg-2);
}


.btc-hd-loai { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-3); }
.btc-hd-card {
    padding: 11px 14px;
    border: 1px solid var(--border-1);
    border-radius: 10px;
    background: var(--bg-surface);
}
.btc-hd-card-t { font-size: 14px; font-weight: 700; color: var(--fg-1); }
.btc-hd-card-w { margin-top: 3px; }
.btc-hd-card-e { margin-top: 5px; font-size: 13px; color: var(--fg-3); }


.btc-hd-pairs { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-3); }
.btc-hd-pair {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 14px;
    border: 1px solid var(--border-1);
    border-radius: 10px;
}
.btc-hd-bad, .btc-hd-good { display: block; padding-left: 20px; position: relative; }
.btc-hd-bad { color: var(--fg-4); text-decoration: line-through; }
.btc-hd-good { color: var(--fg-1); font-weight: 600; }
.btc-hd-bad::before, .btc-hd-good::before {
    position: absolute;
    left: 0;
    font-weight: 700;
}
.btc-hd-bad::before { content: '✗'; color: var(--fg-4); }

.btc-hd-good::before { content: '✓'; color: var(--success-700); }


.btc-hd-vd {
    margin-bottom: var(--space-3);
    padding: 14px;
    border: 1px solid var(--border-1);
    border-radius: 10px;
    background: var(--bg-sunken);
}
.btc-hd-vd-t { font-size: 14px; font-weight: 700; color: var(--fg-1); }
.btc-hd-vd-nhom {
    margin: 12px 0 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fg-4);
}
.btc-hd-vd-muc {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 8px;
    padding: 7px 0;
    border-top: 1px solid var(--border-1);
}
.btc-hd-vd-no { grid-row: 1; font-size: 12px; font-weight: 700; color: var(--fg-4); font-variant-numeric: tabular-nums; }
.btc-hd-vd-nd { grid-column: 2; color: var(--fg-1); font-weight: 600; }
.btc-hd-vd-cf { grid-column: 2; margin-top: 2px; font-size: 12.5px; color: var(--fg-3); }
.btc-hd-vd-cauhinh { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border-2); font-size: 13px; }



.btc-cfg-mob,

.btc-opt-mob { display: none; }



.btc-btn.sm.btc-cfg-mob {
    flex: 0 1 auto;
    height: auto;
    min-height: 40px;                
    padding: 0 12px;
    white-space: nowrap;
}


.btc-sheet-head { display: flex; align-items: flex-start; gap: 10px; }


.btc-sheet .btc-modal-t { font-size: 20px; }


.btc-sheet-soan .btc-panel-body { overflow: visible; max-height: none; }

.btc-sheet-soan .btc-edit-head { --btc-head-px: 0px; padding: 0 0 12px; }
.btc-sheet-soan .btc-crit,
.btc-sheet-soan .btc-group-h,
.btc-sheet-soan .btc-quick { padding-right: 0; }

.btc-sheet-soan .btc-group-h { top: 0; }


.btc-sheet-cfg { display: flex; flex-direction: column; gap: 18px; }
.btc-sheet-cfg .btc-cfg-item { gap: 8px; }
.btc-sheet-cfg .btc-seg { width: 100%; }
.btc-sheet-cfg .btc-seg button { flex: 1 1 0; white-space: nowrap; }


.btc-sheet-pv .btc-col-preview {
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    max-height: none;
}
.btc-sheet-pv .btc-pv-list { overflow: visible; }
.btc-sheet-pv .btc-pv-bar { padding-left: 0; padding-right: 0; }


.btc-sheet-pv .btc-pv-row,
.btc-sheet-pv .btc-pv-gh { padding-left: 0; padding-right: 0; }
.btc-sheet-pv .btc-pv-row { padding-left: 22px; }
.btc-sheet-pv .btc-pv-row::before,
.btc-sheet-pv .btc-pv-row::after { left: 6px; }





@media (max-width: 1280px) {
    .btc-split { grid-template-columns: 276px minmax(0, 1fr) 320px; }

    
    .btc-headrow { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--space-4); }
    .btc-headrow > .btc-min0 { grid-area: 1 / 1; }
    .btc-headrow > .btc-edit-acts { grid-area: 1 / 2; }
    .btc-headrow > .btc-toolbar { grid-area: 2 / 1 / 3 / -1; justify-content: flex-start; }
}


@media (max-width: 1024px) {
    
    .app-main-content > .mud-container:has(.btc-screen) { height: auto; display: block; }
    .btc-screen { flex: none; }
    .btc-screen-body { display: block; }

    .btc-split {
        grid-template-columns: 260px minmax(0, 1fr);
        flex: none;
        min-height: 0;
    }
    .btc-col-preview { grid-column: 1 / -1; }
    
    .btc-panel { max-height: 78vh; }
}


@media (max-width: 720px) {
    
    .btc-split { grid-template-columns: minmax(0, 1fr); }

    
    .btc-panel { max-height: none; }

    
    .btc-headrow { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-3); }
    .btc-headrow > .btc-min0 { grid-area: 1 / 1; }
    .btc-headrow > .btc-edit-acts { grid-area: 2 / 1; }
    .btc-headrow > .btc-toolbar { grid-area: 3 / 1; justify-content: flex-start; }
    .btc-screen-body { padding: var(--space-3) 0 var(--space-5); overflow-y: visible; }
    .btc-stickyhead { padding-top: 0; }

    
    .btc-split > .btc-col-soan,
    .btc-split > .btc-col-preview,
    .btc-cfg > .btc-cfg-item { display: none; }
    .btc-cfg-mob { display: inline-flex; }
    .btc-optitem.btc-opt-mob { display: flex; }
    .btc-optsep.btc-opt-mob { display: block; }

    
    .btc-edit-acts { flex: 1 1 100%; }
    .btc-opt { margin-left: auto; }
    
    .btc-cfg { margin: 10px 0 0; padding: 0; border-top: 0; }

    
    .btc-opt { position: static; }
    .btc-edit-top { position: relative; }
    .btc-optmenu:not(.crit) { left: 0; right: 0; width: auto; min-width: 0; }
    
    .btc-edit-acts { flex-wrap: wrap; }
    
    .btc-setrow { min-height: 56px; padding: 12px; }
    
    .btc-cfg-tog { flex: 1 1 100%; margin-left: 0; justify-content: center; min-height: 40px; }
    
    .btc-edit-head { --btc-head-px: 14px; padding: 12px var(--btc-head-px); }
    .btc-crit { padding: 12px 14px; }
    .btc-group > .btc-crit,
    .btc-group > .btc-quick { padding-left: 38px; }
    .btc-group-h { padding: 9px 14px; }
    .btc-quick { padding: 10px 14px 12px; }
}


@media (max-width: 600px) {
    .btc-scrim { padding: 0; align-items: stretch; }
    .btc-modal,
    .btc-modal.wide {
        width: 100%;
        max-height: 100dvh;
        height: 100dvh;
        border-radius: 0;
    }
    .btc-modal-head { padding: 14px 16px 12px; }
    .btc-modal-body { padding: 14px 16px; }
    .btc-modal-foot { padding: 12px 16px; border-radius: 0; flex-wrap: wrap; }
    .btc-modal-foot .btc-hint { flex: 1 1 100%; margin: 0 0 var(--space-2); }
    .btc-dlg .mud-dialog-title { padding: 14px 16px 12px; }
    .btc-dlg .mud-dialog-content { padding: 14px 16px; }
    
    .btc-dlg .mud-dialog-actions { padding: 12px 16px; flex-wrap: wrap; }
    .btc-dlg .mud-dialog-actions .btc-hint { flex: 1 1 100%; margin: 0 0 var(--space-2); }

    
    .btc-sheet.btc-dlg .mud-dialog-title { padding-top: 26px; }

    
    .btc-bb-hd { display: none; }
    .btc-bb-row {
        grid-template-columns: minmax(0, 1fr) auto auto;
        gap: 7px 10px;
        align-items: center;
    }
    .btc-bb-row > div:first-child { grid-column: 1 / -1; }
    
    .btc-bb-c-yc { grid-column: 1; }
    .btc-bb-c-yc::before { content: 'Yêu cầu '; color: var(--fg-4); }
    .btc-bb-c-val { grid-column: 2; text-align: right; }
    .btc-bb-c-kq { grid-column: 3; flex-direction: row; align-items: center; gap: 7px; }
    .btc-bb-res { width: auto; }
    
    .btc-bb-nhom .btc-bb-row { padding-left: 46px; }
    .btc-bb-nhom .btc-bb-row:not(.btc-bb-hd)::before,
    .btc-bb-nhom .btc-bb-row:not(.btc-bb-hd)::after { left: 26px; }

    
    .btc-bb-rh { flex-wrap: wrap; }
    .btc-bb-verdict { margin-left: auto; }
    .btc-bb-rh > div { flex: 1 0 100%; order: 1; }
    .btc-bb-gapdem { flex: 1 0 100%; order: 2; }
}


@media (max-width: 520px) {
    .btc-frow,
    .btc-pickrow { grid-template-columns: 1fr; }

    .btc-headrow { gap: 12px; }
    .btc-edit-top { gap: 10px; }
    .btc-toolbar { gap: var(--space-2); }
    .btc-search { min-width: 0; flex: 1 1 100%; }
    .btc-select { flex: 1 1 46%; }

    
    .btc-btn,
    .btc-btn.sm,
    .btc-mini,
    .btc-vote,
    .btc-na-btn,
    .btc-usedin-btn,
    .btc-group-add,
    .btc-addgroup-btn,
    
    .btc-seg button,
    .btc-group-name-btn,
    
    .btc-bb-tatca,
    .btc-bb-file,
    .btc-bb-tep,
    
    .btc-switchrow { min-height: 40px; }
    .btc-search,
    .btc-select,
    .btc-group-edit input,
    
    .btc-quick input { height: 40px; }
    .btc-btn.sm { padding: 0 14px; }
    .btc-iconbtn,
    .btc-modal-x,
    .btc-group-tog,
    .btc-group-h .btc-group-pen,
    .btc-group-h .btc-group-x { width: 40px; height: 40px; }
    .btc-group-h .btc-group-x { margin-left: 4px; }
    .btc-optitem { min-height: 44px; }
    .btc-switch { width: 44px; height: 24px; }
    .btc-switch::after { width: 20px; height: 20px; }
    .btc-switch:checked::after { transform: translateX(20px); }
    
    .btc-help-ic { width: 24px; height: 24px; font-size: 12px; }
    .btc-help-pop { width: min(272px, calc(100vw - 48px)); }

    
    .btc-crit-g,
    .btc-setrow-d,
    .btc-pv-rt,
    .btc-pv-cond,
    .btc-pv-warn,
    .btc-pv-note,
    .btc-pv-s,
    .btc-pv-empty,
    .btc-bb-t,
    .btc-bb-note,
    .btc-bb-when,
    .btc-bb-diem-d,
    
    .btc-bb-c-yc,
    .btc-bb-c-val,
    .btc-bb-tep,
    .btc-bb-none,
    .btc-modal-s,
    .btc-help,
    .btc-help-pop,
    .btc-hint,
    .btc-cfg-hint,
    .btc-opthint,
    .btc-usedin-empty,
    .btc-foot-note,
    .btc-numnote,
    .btc-numf-s,
    .btc-crit-edit-hint,
    .btc-addgroup-err,
    .btc-pick-s,
    
    .btc-sum,
    .btc-score-mau,
    .btc-score-foot,
    .btc-score-v small,
    .btc-pv-unit,
    .btc-edit-meta,
    .btc-pv-prog,
    .btc-pv-left,
    .btc-label,
    .btc-empty-s { font-size: 13px; }
    .btc-vote,
    .btc-na-btn,
    .btc-mini,
    .btc-btn,
    .btc-btn.sm,
    .btc-seg button { font-size: 13px; }
    .btc-numf input,
    .btc-numf select,
    .btc-pv-num input,
    .btc-cfg-diem input[type="number"] { height: 40px; font-size: 13px; }
    .btc-numf input { width: 74px; }

    
    .btc-pv-vote { flex-wrap: wrap; }
    .btc-pv-vote .btc-vote { flex: 1 1 30%; }
    .btc-pv-btns { flex-wrap: wrap; }
    .btc-pv-btns .btc-btn { flex: 1 1 45%; }

    
    .btc-group-name-btn { min-width: 120px; text-align: left; }
    .btc-group-add-t { display: none; }
    .btc-group-add { padding: 0; width: 40px; justify-content: center; }
    
    .btc-group-c:not(.rong) { display: none; }

    
    .btc-sum { height: 22px; }

    
    .btc-group > .btc-crit,
    .btc-group > .btc-quick { padding-left: 30px; }
    .btc-group > .btc-crit::before,
    .btc-group > .btc-quick::before,
    .btc-group > .btc-crit::after,
    .btc-group > .btc-quick::after { left: 16px; }
    .btc-group > .btc-crit::after,
    .btc-group > .btc-quick::after { width: 9px; }
    .btc-pv-row { padding-left: 28px; }
    .btc-pv-row::before, .btc-pv-row::after { left: 12px; }
    .btc-pv-row::after { width: 9px; }
    

    
    .btc-optmenu.crit { min-width: 0; width: min(260px, calc(100vw - 32px)); }
}




.btc-grp-pc-sl {
    margin-left: 4px;
    font-weight: 700;
    color: var(--fg-4);
    font-variant-numeric: tabular-nums;
}
.btc-grp-pc-sl.xong { color: var(--status-success-fg); }


.btc-tdg {
    margin-left: 4px;
    padding: 0 6px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .01em;
    white-space: nowrap;
    color: var(--status-warning-fg);
    background: var(--status-warning-bg);
}


.btc-pv-nhac {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}
.btc-pv-nhac-c {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11.5px;
    line-height: 1.3;
    white-space: nowrap;
    cursor: help;              
}
.btc-pv-nhac-c svg { width: 13px; height: 13px; flex-shrink: 0; }
.btc-pv-nhac-c b { font-weight: 700; font-variant-numeric: tabular-nums; }

.btc-pv-nhac-c.info { background: var(--slate-50);          color: var(--fg-3); }
.btc-pv-nhac-c.warn { background: var(--status-warning-bg); color: var(--status-warning-fg); }



.btc-kq { font-weight: 600; white-space: nowrap; color: var(--fg-1); }
.btc-kq.khong { color: var(--status-warning-fg); }
.btc-kq.na,
.btc-kq.cho   { color: var(--fg-4); font-weight: 400; }


