/* QLVB dual Bootstrap 5 — scoped under any .qlvb-* .skin-bs5 root */

[class*="qlvb-"].skin-bs5 .form {
    padding: 0.75rem 0;
}

[class*="qlvb-"].skin-bs5 .form-control {
    height: auto;
    min-height: calc(1.5em + 0.5rem + 2px);
}

[class*="qlvb-"].skin-bs5 .danhsach {
    margin-top: 0.5rem;
}

[class*="qlvb-"].skin-bs5 .danhsach > table.table,
[class*="qlvb-"].skin-bs5 table.table {
    width: 100%;
    caption-side: bottom;
    border-collapse: collapse;
}

[class*="qlvb-"].skin-bs5 .btn.min-width-100 {
    min-width: 100px;
}

[class*="qlvb-"].skin-bs5 .fright {
    margin-left: auto;
}

[class*="qlvb-"].skin-bs5 .btn-default {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d;
}

[class*="qlvb-"].skin-bs5 .panel {
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    margin-bottom: 1rem;
}

[class*="qlvb-"].skin-bs5 .panel-heading {
    padding: 0.75rem 1rem;
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
}

[class*="qlvb-"].skin-bs5 .panel-title {
    margin: 0;
    font-size: 1rem;
}

[class*="qlvb-"].skin-bs5 .panel-body {
    padding: 1rem;
}

[class*="qlvb-"].skin-bs5 .form-horizontal .row {
    margin-bottom: 0.75rem;
}

/* DataGrid pager — keep td as table-cell (colspan). Flex on inner wrapper only. */
[class*="qlvb-"].skin-bs5 tr.pagination-bs5 > td,
[class*="qlvb-"].skin-bs5 .pagination-bs5 > td {
    display: table-cell !important;
    width: 100%;
    padding: 0.75rem 0 !important;
    border: 0 !important;
    background: transparent !important;
    vertical-align: middle !important;
}

[class*="qlvb-"].skin-bs5 .cm-pager-bs5 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
}

[class*="qlvb-"].skin-bs5 .cm-pager-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

[class*="qlvb-"].skin-bs5 .cm-pager-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
}

[class*="qlvb-"].skin-bs5 .cm-pager-nav a.page-link,
[class*="qlvb-"].skin-bs5 .cm-pager-nav span.page-link,
[class*="qlvb-"].skin-bs5 .cm-pager-nav label.page-link {
    position: relative;
    display: inline-block;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25;
    color: #0d6efd;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
    cursor: pointer;
}

[class*="qlvb-"].skin-bs5 .cm-pager-nav a.page-link:hover {
    z-index: 2;
    color: #0a58ca;
    background-color: #e9ecef;
    border-color: #dee2e6;
}

[class*="qlvb-"].skin-bs5 .cm-pager-nav .page-link.active,
[class*="qlvb-"].skin-bs5 .cm-pager-nav span.page-link.active,
[class*="qlvb-"].skin-bs5 .cm-pager-nav label.page-link.active {
    z-index: 3;
    color: #fff;
    background-color: #0d6efd;
    border-color: #0d6efd;
    cursor: default;
}

[class*="qlvb-"].skin-bs5 .cm-pager-nav a.page-link.aspNetDisabled,
[class*="qlvb-"].skin-bs5 .cm-pager-nav a.aspNetDisabled {
    color: #6c757d;
    pointer-events: none;
    background-color: #fff;
    border-color: #dee2e6;
    opacity: 0.65;
}

[class*="qlvb-"].skin-bs5 .cm-pager-meta .paging_label {
    white-space: nowrap;
    font-size: 0.875rem;
}

[class*="qlvb-"].skin-bs5 .cm-pager-meta .ddl_pagesize {
    width: auto !important;
    min-width: 4.5rem;
    display: inline-block !important;
}

/* Edit/Delete icons — Font Awesome on BS5 */
[class*="qlvb-"].skin-bs5 a.icon-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    text-decoration: none;
    vertical-align: middle;
}

[class*="qlvb-"].skin-bs5 a.icon-sua::before,
[class*="qlvb-"].skin-bs5 a.icon-xoa::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-style: normal;
    font-size: 1rem;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

[class*="qlvb-"].skin-bs5 a.icon-sua::before {
    content: "\f044";
    color: #0d6efd;
}

[class*="qlvb-"].skin-bs5 a.icon-xoa::before {
    content: "\f2ed";
    color: #dc3545;
}

[class*="qlvb-"].skin-bs5 a.icon-sua:hover::before {
    color: #0a58ca;
}

[class*="qlvb-"].skin-bs5 a.icon-xoa:hover::before {
    color: #b02a37;
}

/* Homepage widget tweaks */
[class*="qlvb-"].skin-bs5 ul.vbm {
    padding-left: 1.25rem;
}

[class*="qlvb-"].skin-bs5 .table-detail th,
[class*="qlvb-"].skin-bs5 .table-detail td {
    padding: 0.5rem 0.75rem;
    vertical-align: top;
}

/* Column align + width fit header (skill vlp-col-*) */
[class*="qlvb-"] .danhsach > table,
[class*="qlvb-"] table.table {
    table-layout: fixed;
    width: 100%;
}

[class*="qlvb-"] th.vlp-col-stt,
[class*="qlvb-"] th.vlp-col-num,
[class*="qlvb-"] th.vlp-col-date,
[class*="qlvb-"] th.vlp-col-action,
[class*="qlvb-"] th.vlp-col-icon,
[class*="qlvb-"] th.vlp-col-title,
[class*="qlvb-"] th.vlp-col-files,
[class*="qlvb-"] th.vlp-col-name {
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
}

[class*="qlvb-"] th.vlp-col-stt,
[class*="qlvb-"] td.vlp-col-stt {
    text-align: center !important;
    white-space: nowrap;
    padding-left: 0.35rem !important;
    padding-right: 0.35rem !important;
}

/* Số hiệu / Số ký hiệu — width từ ascx */
[class*="qlvb-"] th.vlp-col-num,
[class*="qlvb-"] td.vlp-col-num {
    text-align: center !important;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Ngày ban hành / Ngày hiệu lực / Ngày ký */
[class*="qlvb-"] th.vlp-col-date,
[class*="qlvb-"] td.vlp-col-date {
    text-align: center !important;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Xem */
[class*="qlvb-"] th.vlp-col-action,
[class*="qlvb-"] td.vlp-col-action {
    text-align: center !important;
    white-space: nowrap;
}

/* Sửa / Xóa / Tải về */
[class*="qlvb-"] th.vlp-col-icon,
[class*="qlvb-"] td.vlp-col-icon {
    text-align: center !important;
    white-space: nowrap;
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
}

/* Tên ngắn — width từ ascx HeaderStyle */
[class*="qlvb-"] th.vlp-col-name,
[class*="qlvb-"] td.vlp-col-name {
    text-align: left !important;
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: normal;
}

[class*="qlvb-"] th.vlp-col-name {
    white-space: nowrap !important;
}

/* Trích yếu / Diễn giải / cột text chính */
[class*="qlvb-"] th.vlp-col-title,
[class*="qlvb-"] td.vlp-col-title {
    text-align: left !important;
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: normal;
}

[class*="qlvb-"] th.vlp-col-title {
    white-space: nowrap !important;
}

[class*="qlvb-"] th.vlp-col-files,
[class*="qlvb-"] td.vlp-col-files {
    text-align: left !important;
    word-break: break-word;
    overflow-wrap: anywhere;
    white-space: normal;
}

[class*="qlvb-"] th.vlp-col-files {
    white-space: nowrap !important;
}

/* —— QLVB_TIMKIEMVANBAN filter form (dual layout) —— */
.qlvb-timkiem .qlvb-search-form {
    margin-bottom: 1rem;
}

.qlvb-timkiem .qlvb-filter-bar {
    margin-bottom: 1rem;
}

.qlvb-timkiem:not(.skin-bs5) .qlvb-filter-bar {
    background: #f5f8ff;
    border: 1px solid #c8d9f5;
    border-radius: 6px;
    padding: 0.85rem 1rem;
}

.qlvb-timkiem.skin-bs5 .qlvb-filter-bar {
    background: var(--bs-light, #f8f9fa);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: var(--bs-border-radius, 0.375rem);
    padding: 1rem 1.15rem;
}

.qlvb-timkiem .qlvb-filter-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.85rem 1rem;
    align-items: end;
}

@media (min-width: 576px) {
    .qlvb-timkiem .qlvb-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .qlvb-timkiem .qlvb-filter-half {
        grid-column: span 1;
    }
    .qlvb-timkiem .qlvb-filter-quarter {
        grid-column: span 1;
    }
    .qlvb-timkiem .qlvb-filter-actions {
        grid-column: 1 / -1;
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        align-items: center;
    }
}

@media (min-width: 992px) {
    .qlvb-timkiem .qlvb-filter-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .qlvb-timkiem .qlvb-filter-half {
        grid-column: span 2;
    }
    .qlvb-timkiem .qlvb-filter-quarter {
        grid-column: span 1;
    }
    .qlvb-timkiem .qlvb-filter-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }
}

.qlvb-timkiem .qlvb-filter-label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #475569;
    line-height: 1.2;
}

.qlvb-timkiem.skin-bs5 .qlvb-filter-label {
    color: var(--bs-secondary-color, #6c757d);
    margin-bottom: 0.25rem;
}

.qlvb-timkiem .qlvb-filter-field {
    min-width: 0;
}

.qlvb-timkiem .qlvb-filter-field .form-control,
.qlvb-timkiem .qlvb-filter-field .vlp-listbox-multi,
.qlvb-timkiem .qlvb-filter-field .vlp-input-date,
.qlvb-timkiem .qlvb-filter-field .qlvb-filter-control {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    height: 38px;
    min-height: 38px;
    padding: 0.375rem 0.75rem;
    font-size: 0.9375rem;
    line-height: 1.5;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    background-color: #fff;
}

.qlvb-timkiem.skin-bs5 .qlvb-filter-field .form-control,
.qlvb-timkiem.skin-bs5 .qlvb-filter-field .vlp-input-date,
.qlvb-timkiem.skin-bs5 .qlvb-filter-field .qlvb-filter-control {
    border-color: var(--bs-border-color, #dee2e6);
}

.qlvb-timkiem .qlvb-filter-field .select2-container {
    width: 100% !important;
}

.qlvb-timkiem .select2-container .select2-selection--multiple {
    min-height: 38px !important;
    height: auto;
    border: 1px solid #ced4da !important;
    border-radius: 0.375rem !important;
    padding: 2px 4px;
}

.qlvb-timkiem.skin-bs5 .select2-container .select2-selection--multiple {
    border-color: var(--bs-border-color, #dee2e6) !important;
}

.qlvb-timkiem .select2-container--default .select2-selection--multiple .select2-selection__rendered {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    padding: 0 2px;
}

.qlvb-timkiem .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #e7f1ff;
    border-color: #b6d4fe;
    color: #084298;
    margin: 2px;
    border-radius: 0.25rem;
}

.qlvb-timkiem .select2-container--default .select2-selection--multiple .select2-selection__placeholder {
    margin-top: 0;
    line-height: 30px;
    color: #6c757d;
}

.qlvb-timkiem .select2-container--default .select2-selection--multiple .select2-selection__clear {
    margin-top: 4px;
}

.qlvb-timkiem .select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: #86b7fe !important;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15);
}

.qlvb-timkiem .qlvb-filter-field .form-control:focus,
.qlvb-timkiem .qlvb-filter-field .qlvb-filter-control:focus {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15);
}

.qlvb-timkiem .qlvb-filter-actions .btn {
    min-width: 100px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.qlvb-timkiem .danhsach a {
    color: inherit;
    text-decoration: none;
}

.qlvb-timkiem.skin-bs5 .danhsach a {
    color: var(--bs-body-color, #212529);
}

.qlvb-timkiem.skin-bs5 .danhsach a:hover {
    color: var(--bs-link-hover-color, #0a58ca);
    text-decoration: underline;
}

.qlvb-timkiem .trichyeu {
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* —— QLVB_CHITIETVANBAN detail (dual BS5) —— */
.qlvb-chitiet.skin-bs5 .qlvb-detail-form,
.qlvb-chitiet.skin-bs5 .qlvb-detail-body {
    padding: 0;
}

.qlvb-chitiet.skin-bs5 .qlvb-detail-row,
.qlvb-chitiet.skin-bs5 .form-horizontal .form-group {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0.85rem;
    margin-top: 0;
}

.qlvb-chitiet.skin-bs5 .qlvb-detail-label,
.qlvb-chitiet.skin-bs5 .form-horizontal .control-label {
    flex: 0 0 28%;
    max-width: 28%;
    box-sizing: border-box;
    padding: 0.35rem 0.75rem 0.35rem 0;
    margin-bottom: 0;
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--bs-secondary-color, #6c757d);
    text-align: right;
    float: none !important;
}

.qlvb-chitiet.skin-bs5 .qlvb-detail-value,
.qlvb-chitiet.skin-bs5 .form-horizontal .form-group > [class*="col-sm-"] {
    flex: 0 0 72%;
    max-width: 72%;
    box-sizing: border-box;
    padding: 0.35rem 0 0.35rem 0.75rem;
    float: none !important;
    width: auto;
}

.qlvb-chitiet.skin-bs5 .lable-value {
    display: block;
    font-size: 1rem;
    font-weight: 500;
    color: var(--bs-body-color, #212529);
    line-height: 1.5;
    word-break: break-word;
}

.qlvb-chitiet.skin-bs5 .qlvb-file-list {
    margin: 0;
    padding: 0 !important;
}

.qlvb-chitiet.skin-bs5 .qlvb-file-grid,
.qlvb-chitiet.skin-bs5 .qlvb-file-grid.table {
    width: 100%;
    margin-bottom: 0;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.375rem;
    overflow: hidden;
}

.qlvb-chitiet.skin-bs5 .qlvb-file-grid td {
    padding: 0.5rem 0.75rem;
    border-color: var(--bs-border-color, #dee2e6);
    vertical-align: middle;
}

.qlvb-chitiet.skin-bs5 .qlvb-file-link {
    color: var(--bs-link-color, #0d6efd);
    text-decoration: none;
    word-break: break-all;
}

.qlvb-chitiet.skin-bs5 .qlvb-file-link:hover {
    text-decoration: underline;
}

.qlvb-chitiet.skin-bs5 .qlvb-file-download {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #dc3545;
    text-decoration: none;
    font-size: 1.1rem;
}

.qlvb-chitiet.skin-bs5 .qlvb-file-download:hover {
    color: #b02a37;
}

.qlvb-chitiet.skin-bs5 .qlvb-related {
    margin-top: 1.5rem;
    padding: 1rem 0 0;
    border-top: 1px solid var(--bs-border-color, #dee2e6);
}

.qlvb-chitiet.skin-bs5 .qlvb-related-title,
.qlvb-chitiet.skin-bs5 .title-skin {
    display: block;
    margin-bottom: 0.75rem;
    font-size: 1rem;
    color: var(--bs-body-color, #212529);
}

.qlvb-chitiet.skin-bs5 ul.vbm {
    margin: 0;
    padding-left: 0.25rem;
    list-style: none;
}

.qlvb-chitiet.skin-bs5 ul.vbm li {
    position: relative;
    list-style: none;
    margin-bottom: 0.4rem;
    padding-left: 1.1rem;
    text-indent: 0;
    line-height: 1.45;
}

.qlvb-chitiet.skin-bs5 ul.vbm li:before {
    content: "" !important;
    display: block !important;
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background-color: var(--bs-primary, #0d6efd);
    font-family: inherit;
    color: inherit;
}

.qlvb-chitiet.skin-bs5 ul.vbm li a,
.qlvb-chitiet.skin-bs5 ul.vbm li a:hover,
.qlvb-chitiet.skin-bs5 ul.vbm li a:focus,
.qlvb-chitiet.skin-bs5 ul.vbm li a:visited {
    text-decoration: none !important;
    color: inherit;
}

.qlvb-chitiet.skin-bs5 ul.vbm li a:hover {
    color: var(--bs-link-hover-color, #0a58ca);
}

.qlvb-chitiet.skin-bs5 .qlvb-related-pager.controls,
.qlvb-chitiet.skin-bs5 .controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
    padding-top: 0.75rem !important;
}

.qlvb-chitiet.skin-bs5 .controls a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    margin: 0;
    padding: 0 0.5rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.375rem;
    background: #fff;
    color: var(--bs-body-color, #212529);
    text-decoration: none;
    font-size: 0.875rem;
}

.qlvb-chitiet.skin-bs5 .controls a:hover {
    background: var(--bs-light, #f8f9fa);
}

.qlvb-chitiet.skin-bs5 .controls .active {
    background: var(--bs-primary, #0d6efd);
    border-color: var(--bs-primary, #0d6efd);
    color: #fff !important;
}

.qlvb-chitiet.skin-bs5 .controls .hidden {
    display: none !important;
}

@media (max-width: 767.98px) {
    .qlvb-chitiet.skin-bs5 .qlvb-detail-label,
    .qlvb-chitiet.skin-bs5 .form-horizontal .control-label,
    .qlvb-chitiet.skin-bs5 .qlvb-detail-value,
    .qlvb-chitiet.skin-bs5 .form-horizontal .form-group > [class*="col-sm-"] {
        flex: 0 0 100%;
        max-width: 100%;
        text-align: left;
        padding-left: 0;
        padding-right: 0;
    }

    .qlvb-chitiet.skin-bs5 .qlvb-detail-label,
    .qlvb-chitiet.skin-bs5 .form-horizontal .control-label {
        padding-bottom: 0.15rem;
        font-size: 0.8125rem;
    }
}