.total-chip{font-weight:600;padding:2px 6px;border-radius:10px;background:#0d6efd;color:#fff;}.table__tansuat__container{max-height:70vh;overflow:auto;}.table__tansuat thead th,.table__tansuat tbody td{white-space:nowrap;}.table__tansuat thead th:first-child{background:#fff;}.table__tansuat thead th{position:sticky;top:0;z-index:3;}.table__tansuat .sticky-col{position:sticky;left:0;z-index:2;}.table__tansuat tbody tr:nth-child(odd) .sticky-col{background:#f9fafb;}.table__tansuat tbody tr:hover td{background:#fff7e6;}.table__tansuat td,.table__tansuat th{padding:.35rem .5rem;}.table__tansuat td.count-0.hidden-zero{color:transparent;}.legend-box{width:20px;height:12px;display:inline-block;border-radius:2px;border:1px solid #e5e7eb;}.hb-0{background:#f3f4f6 !important;}.hb-1{background:#eaf2ff !important;}.hb-2{background:#dceaff !important;}.hb-3{background:#cfe3ff !important;}.hb-4{background:#c0dbff !important;}.hb-5{background:#add1ff !important;}.hb-6{background:#98c4ff !important;}.hb-7{background:#7eb4ff !important;}.hb-8{background:#5da0ff !important;color:#fff;}.hb-9{background:#3f8eff !important;color:#fff;}.num-badge{font-weight:700;color:#ff6b6b !important;}.comp-table-responsive .js-number-row:hover{transform:scale(1) !important;box-shadow:0 6px 15px rgba(0,0,0,0.25) !important;position:relative !important;z-index:10 !important;transition:transform 0.15s ease-out,box-shadow 0.15s ease-out !important;}.legend .comp-box{width:30px;height:12px;border-radius:2px;display:inline-block;margin-right:4px;}

/* Custom Table Component Styling */
.comp-table {
    display: table !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 1rem !important;
    background-color: #fff !important;
    border-collapse: collapse !important;
}
.comp-table th,
.comp-table td {
    padding: 0.5rem 0.6rem !important;
    vertical-align: middle !important;
    border-top: 1px solid #dee2e6 !important;
}
.comp-table thead th {
    vertical-align: bottom !important;
    border-bottom: 2px solid #dee2e6 !important;
    background-color: #f8f9fa !important;
    color: #333 !important;
    font-weight: 700 !important;
}
.comp-table tbody tr:hover {
    background-color: rgba(0, 0, 0, 0.02) !important;
}

/* Bordered Variant */
.util-table-bordered,
.comp-table.util-table-bordered {
    border: 1px solid #dee2e6 !important;
}
.util-table-bordered th,
.util-table-bordered td {
    border: 1px solid #dee2e6 !important;
}
.util-table-bordered thead th,
.util-table-bordered thead td {
    border-bottom-width: 2px !important;
}

/* Responsive Wrapper */
.comp-table-responsive {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

/* Sticky Column Support */
.comp-table .sticky-col {
    position: -webkit-sticky !important;
    position: sticky !important;
    left: 0 !important;
    background-color: #fff !important;
    z-index: 2 !important;
}
.comp-table thead th.sticky-col {
    z-index: 3 !important;
    background-color: #f8f9fa !important;
}

/* Utility classes used in frontend statistics tables */
.util-small {
    font-size: 0.85rem !important;
}
.util-text-center {
    text-align: center !important;
}
.util-align-items-center {
    vertical-align: middle !important;
}
.util-text-red {
    color: #dc3545 !important;
}
.util-text-nowrap {
    white-space: nowrap !important;
}
.util-font-bold {
    font-weight: 700 !important;
}
.util-font-medium {
    font-weight: 500 !important;
}
.util-fs-6 {
    font-size: 1rem !important;
}
.util-fs-10-10 {
    font-size: 1.1rem !important;
}
.util-mb-0 {
    margin-bottom: 0 !important;
}
.util-mb-4 {
    margin-bottom: 1.5rem !important;
}
.util-mt-0 {
    margin-top: 0 !important;
}
.util-mt-3 {
    margin-top: 1rem !important;
}
.util-m-0 {
    margin: 0 !important;
}
.util-p-2 {
    padding: 0.5rem !important;
}
.util-px-3 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}
.util-bg-orange {
    background: linear-gradient(135deg, #e51919, #b81010) !important;
    color: #fff !important;
}
.util-bg-orange h2,
.util-bg-orange span {
    color: #fff !important;
}
.util-flex {
    display: flex !important;
}
.util-ms-2 {
    margin-left: 0.5rem !important;
}
.util-me-2 {
    margin-right: 0.5rem !important;
}
.util-block {
    display: block !important;
}
.util-rounded {
    border-radius: 4px !important;
}
.util-shadow-sm {
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075) !important;
}
.util-border {
    border: 1px solid #dee2e6 !important;
}
.util-border-danger {
    border-color: #dc3545 !important;
}

/* Legend Box styling */
.legend .box {
    width: 25px !important;
    height: 14px !important;
    display: inline-block !important;
    border-radius: 2px !important;
    border: 1px solid #dee2e6 !important;
    margin-right: 4px !important;
    vertical-align: middle !important;
}

/* Form Filter and Flex utilities */
.util-bg-primary-subtle {
    background-color: #f0f5ff !important;
    border: 1px solid #d9e7ff !important;
    border-radius: 6px !important;
}
.util-gap-3 {
    gap: 1rem !important;
}
.util-flex-wrap {
    flex-wrap: wrap !important;
}
.util-ms-auto {
    margin-left: auto !important;
}
.util-align-items-end {
    align-items: flex-end !important;
}

/* Custom Styled Select and Checkbox (Bootstrap 5 emulation for BS4 compatibility) */
.form-select {
    display: block !important;
    width: 100% !important;
    padding: 0.375rem 2rem 0.375rem 0.75rem !important;
    font-size: 0.9rem !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: #212529 !important;
    background-color: #fff !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 16px 12px !important;
    border: 1px solid #ced4da !important;
    border-radius: 0.25rem !important;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}
.form-select:focus {
    border-color: #86b7fe !important;
    outline: 0 !important;
    box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25) !important;
}

.util-small .form-select,
.form-select.util-small {
    padding: 0.25rem 1.75rem 0.25rem 0.5rem !important;
    font-size: 0.85rem !important;
    border-radius: 0.2rem !important;
}

.form-check {
    display: flex !important;
    align-items: center !important;
    min-height: 1.5rem !important;
    padding-left: 0 !important;
    margin-bottom: 0 !important;
    gap: 0.5rem !important;
}

.form-check-input {
    width: 1.1em !important;
    height: 1.1em !important;
    margin-top: 0 !important;
    vertical-align: top !important;
    background-color: #fff !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    border: 1px solid rgba(0,0,0,.25) !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    border-radius: 0.25em !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
}

.form-check-input:checked {
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e") !important;
}

.form-check-label {
    color: #333 !important;
    cursor: pointer !important;
    font-weight: 500 !important;
    margin-bottom: 0 !important;
}

/* Premium Statistics Header & Navigation Tabs Styling */
.page-header {
    background-color: #fff !important;
    padding: 1.25rem !important;
    border-radius: 8px !important;
    border: 1px solid #e51919 !important;
}

.page-header .bg-white {
    background-color: transparent !important;
}

.page-header .list__subpage,
.page-header .bg-white ul.row {
    list-style: none !important;
    padding: 0 !important;
    margin: 0.75rem 0 0 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    row-gap: 8px !important;
    column-gap: 0 !important;
}

.page-header .list__subpage::before,
.page-header .list__subpage li::before {
    display: none !important;
    content: none !important;
}

.page-header .list__subpage li,
.page-header .bg-white ul.row li {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    flex: 0 0 auto !important;
}

.page-header .list__subpage li a,
.page-header .bg-white ul.row li a {
    display: inline-block !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: #495057 !important;
    background: transparent !important;
    border: none !important;
    padding: 2px 0 !important;
    text-decoration: none !important;
    transition: color 0.15s ease-in-out !important;
}

.page-header .list__subpage li a:hover,
.page-header .bg-white ul.row li a:hover {
    color: #0056b3 !important;
    background: transparent !important;
    border: none !important;
    text-decoration: underline !important;
}

/* Active Link Styles */
.page-header .list__subpage li a.text-red,
.page-header .bg-white ul.row li a.text-red {
    color: #e51919 !important;
    background: transparent !important;
    border: none !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

/* Vertical Separator for links */
.page-header .list__subpage li:not(:last-child)::after,
.page-header .bg-white ul.row li:not(:last-child)::after {
    content: "|" !important;
    margin-left: 12px !important;
    margin-right: 12px !important;
    color: #dee2e6 !important;
    font-size: 0.8rem !important;
    font-weight: normal !important;
    pointer-events: none !important;
}