/* TCDB - Bootstrap 5 layer: tương thích BS3 + responsive */
:root {
  --tcdb-brand: #8B1E3D;
  --tcdb-brand-dark: #6B1530;
  --tcdb-accent: #B53852;
  --tcdb-header-bg: #8B1E3D;
  --tcdb-menu-bg: #6B1530;
  --tcdb-menu-hover: #A02848;
  --tcdb-footer: #B53852;
}

html {
  -webkit-text-size-adjust: 100%;
}

body#home,
body {
  overflow-x: hidden;
  background: #f4f6f8;
  font-family: "Segoe UI", Tahoma, Arial, sans-serif;
}

/* ===== BS3 → BS5 compatibility ===== */
.panel,
section.panel {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: 0.375rem;
  margin-bottom: 1rem;
}

.panel-heading,
.panel > header.panel-heading,
.card-header.tab-bg-dark-navy-blue,
.panel-heading.tab-bg-dark-navy-blue {
  padding: 0.5rem 0.75rem;
  margin-bottom: 0;
  background-color: #f8f9fa;
  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: calc(0.375rem - 1px) calc(0.375rem - 1px) 0 0;
}

.panel-body {
  flex: 1 1 auto;
  padding: 1rem;
}

.panel-footer {
  padding: 0.5rem 1rem;
  background-color: #f8f9fa;
  border-top: 1px solid rgba(0, 0, 0, 0.125);
}

/* Old BS3 nav-tabs (li.active > a) */
.nav-tabs {
  border-bottom: 1px solid #dee2e6;
  flex-wrap: wrap;
}

.nav-tabs > li {
  display: inline-block;
  margin-bottom: -1px;
}

.nav-tabs > li > a {
  display: block;
  padding: 0.5rem 1rem;
  color: #495057;
  text-decoration: none;
  border: 1px solid transparent;
  border-top-left-radius: 0.375rem;
  border-top-right-radius: 0.375rem;
}

.nav-tabs > li > a:hover {
  border-color: #e9ecef #e9ecef #dee2e6;
  isolation: isolate;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus,
.nav-tabs .nav-link.active {
  color: #0d6efd;
  background-color: #fff;
  border-color: #dee2e6 #dee2e6 #fff;
  font-weight: 700;
  text-transform: uppercase;
}

.nav-tabs > li.active {
  color: #4CAF50 !important;
}

/* Tab labels: "Tab 1." badge + title */
.tcdb-tab-label {
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  text-transform: none;
  font-weight: 600;
  line-height: 1.35;
}
.tcdb-tab-num {
  display: inline-block;
  flex-shrink: 0;
  font-size: 0.78em;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--tcdb-brand, #8B1E3D);
  background: rgba(139, 30, 61, 0.08);
  border: 1px solid rgba(139, 30, 61, 0.25);
  border-radius: 0.25rem;
  padding: 0.12rem 0.45rem;
  line-height: 1.35;
  white-space: nowrap;
}
.nav-tabs .nav-link.active .tcdb-tab-num,
.nav-tabs > li.active > a .tcdb-tab-num {
  color: #fff;
  background: var(--tcdb-brand, #8B1E3D);
  border-color: var(--tcdb-brand, #8B1E3D);
}

.btn-default {
  --bs-btn-color: #212529;
  --bs-btn-bg: #f8f9fa;
  --bs-btn-border-color: #ced4da;
  --bs-btn-hover-bg: #e2e6ea;
  --bs-btn-hover-border-color: #dae0e5;
  color: #212529;
  background-color: #f8f9fa;
  border-color: #ced4da;
}

.pull-left { float: left !important; }
.pull-right { float: right !important; }
.hidden { display: none !important; }
.invisible { visibility: hidden !important; }
.img-responsive { max-width: 100%; height: auto; }
.label {
  display: inline-block;
  padding: 0.25em 0.45em;
  font-size: 75%;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0.25rem;
  background: #6c757d;
}
.label-danger { background: #dc3545; }
.label-success { background: #198754; }
.label-warning { background: #ffc107; color: #212529; }
.label-info { background: #0dcaf0; color: #212529; }
.label-primary { background: #0d6efd; }

.input-group-addon {
  display: flex;
  align-items: center;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  text-align: center;
  white-space: nowrap;
  background-color: #e9ecef;
  border: 1px solid #ced4da;
  border-radius: 0.375rem;
}

.form-group {
  margin-bottom: 1rem;
}

.control-label {
  margin-bottom: 0.5rem;
}

/* ===== Layout shell ===== */
.tcdb-header {
  background: linear-gradient(135deg, var(--tcdb-brand) 0%, var(--tcdb-brand-dark) 100%);
  color: #fff;
  position: relative;
  padding: 0.45rem 0.75rem;
}

.tcdb-header #banner {
  min-height: 0;
}

.tcdb-banner-row1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.tcdb-banner-row2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.25rem;
  padding-top: 0.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.tcdb-header .title-header {
  color: #ffe082;
  text-align: left;
  font-weight: 700;
  font-size: clamp(0.75rem, 1.5vw, 0.95rem);
  letter-spacing: 0.01em;
  margin: 0;
  line-height: 1.35;
  flex: 1 1 auto;
  min-width: 0;
}

/* Menu button lives in header row 2 (mobile) */
.tcdb-banner-row2 .menu-toggle {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  background: #A02848;
  color: #fff;
  border: 0;
  border-radius: 0.35rem;
  padding: 0.4rem 0.7rem;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  white-space: nowrap;
}

.tcdb-header #user,
.tcdb-user-bar {
  position: static !important;
  text-align: right;
  color: #fff;
  font-size: 0.85rem;
  margin: 0;
}

.tcdb-header #user a {
  color: #ffe082;
  text-decoration: none;
}

.tcdb-header #user a:hover {
  text-decoration: underline;
}

#doituongbi_an,
.tcdb-brand {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.65rem;
  flex-wrap: nowrap;
}

#doituongbi_an .content-header h2,
#doituongbi_an .content-header h3 {
  color: #fff !important;
  margin: 0 !important;
}

#doituongbi_an .content-header h3 {
  font-size: 0.8rem;
  font-weight: 600;
}

#doituongbi_an .content-header h2 {
  font-size: clamp(0.95rem, 1.8vw, 1.25rem);
  font-weight: 700;
}

/* Navbar / menu */
.tcdb-nav-wrap {
  background: var(--tcdb-menu-bg);
  border-bottom: 2px solid var(--tcdb-accent);
}

#topnav {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding: 0 0.5rem;
}

.tcdb-nav-bar {
  display: none !important;
}

#topnav .menu-toggle,
.menu-toggle {
  /* default hidden on desktop; shown in header row2 on mobile */
}

ul.srt-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  background: transparent !important;
}

ul.srt-menu > li {
  position: relative;
  float: none !important;
  display: block;
}

ul.srt-menu > li > a {
  display: block;
  color: #fff !important;
  padding: 0.65rem 0.85rem !important;
  text-decoration: none !important;
  font-weight: 600;
  font-size: 0.85rem;
  white-space: nowrap;
  border: 0 !important;
  background: transparent !important;
}

ul.srt-menu > li > a:hover,
ul.srt-menu > li:hover > a,
ul.srt-menu > li > a:focus {
  background: var(--tcdb-menu-hover) !important;
  color: #fff !important;
}

ul.srt-menu li ul {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  min-width: 240px;
  z-index: 1050;
  background: #fff !important;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  border-radius: 0 0 0.375rem 0.375rem;
  padding: 0.35rem 0;
  margin: 0;
  list-style: none;
}

ul.srt-menu li:hover > ul,
ul.srt-menu li.sfHover > ul,
ul.srt-menu li.open > ul {
  display: block;
}

ul.srt-menu li ul li a {
  display: block;
  color: #212529 !important;
  padding: 0.45rem 1rem !important;
  white-space: normal;
  background: transparent !important;
  font-weight: 500;
  font-size: 0.875rem;
}

ul.srt-menu li ul li a:hover {
  background: #f1f3f5 !important;
  color: var(--tcdb-brand) !important;
}

/* Content area */
#hero.tcdb-main {
  background: #f4f6f8;
  padding: 0.25rem 0 0.75rem;
  min-height: 0;
}

#hero .wrapper,
.tcdb-main .wrapper {
  max-width: none !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 0.75rem !important;
  box-sizing: border-box;
}

#dvGrid.tttn-page {
  background: #fff;
  border-radius: 0.5rem;
  box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.06);
  padding: 1rem;
  min-height: 480px;
  overflow-x: auto;
}

#dvGrid h3 {
  font-size: clamp(1rem, 2vw, 1.35rem);
  color: var(--tcdb-brand);
  margin: 0 0 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #e9ecef;
}

#dvGrid h3 .fa {
  margin-right: 0.4rem;
}

/* Footer */
footer,
#footer {
  background-color: var(--tcdb-footer) !important;
}

#footer .wrapper {
  max-width: none !important;
  margin: 0 auto !important;
  padding: 1rem !important;
}

#footer p,
#footer a {
  color: #fff !important;
}

.tcdb-footer-inner {
  text-align: center;
  color: #fff;
  font-size: 0.85rem;
  line-height: 1.5;
}

/* ===== Forms & controls ===== */
select.form-control,
input.form-control,
textarea.form-control,
.form-select,
select:not([multiple]),
input[type="text"],
input[type="password"],
input[type="number"],
textarea {
  max-width: 100%;
}

#dvGrid select,
#dvGrid input[type="text"],
#dvGrid input[type="password"],
#dvGrid textarea {
  border: 1px solid #ced4da;
  border-radius: 0.375rem;
  padding: 0.35rem 0.5rem;
  min-height: 34px;
}

/* Keep room for BS5 form-select chevron (do not use the compact padding above) */
#dvGrid select.form-select,
#dvGrid .form-select {
  padding: 0.375rem 2.25rem 0.375rem 0.75rem;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
}

#dvGrid .button,
#dvGrid input[type="submit"].button,
#dvGrid input.button,
.btn-tcdb {
  display: inline-block;
  padding: 0.4rem 0.9rem;
  background: var(--tcdb-brand) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 0.375rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  line-height: 1.4;
}

#dvGrid .button:hover,
.btn-tcdb:hover {
  background: var(--tcdb-brand-dark) !important;
}

/* Tables — khung cuộn ngang + dọc, cố định hàng đầu / cột đầu */
.table-responsive,
.tcdb-table-wrap {
  width: 100%;
  max-width: 100%;
  max-height: min(75vh, 780px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 1rem;
  display: block;
  border: 1px solid #dee2e6;
  background: #fff;
  position: relative;
}

.tcdb-table-wrap > table,
.table-responsive > table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  margin-bottom: 0 !important;
}

/* Hàng đầu (thead): cố định khi cuộn dọc */
.tcdb-table-wrap > table > thead,
.table-responsive > table > thead {
  position: sticky;
  top: 0;
  z-index: 5;
}

.tcdb-table-wrap > table > thead th,
.tcdb-table-wrap > table > thead td,
.table-responsive > table > thead th,
.table-responsive > table > thead td {
  background: #fff8e1 !important;
  box-shadow: inset 0 -1px 0 #cfcfcf;
}

/* Cột cố định khi cuộn ngang (1 hoặc 2 cột đầu) */
.tcdb-table-wrap .tcdb-sticky-col,
.table-responsive .tcdb-sticky-col {
  position: sticky !important;
  left: 0 !important;
  z-index: 3;
  background: #fff !important;
  box-shadow: 1px 0 0 #cfcfcf;
}

.tcdb-table-wrap .tcdb-sticky-col-2,
.table-responsive .tcdb-sticky-col-2 {
  position: sticky !important;
  z-index: 3;
  background: #fff !important;
  box-shadow: 1px 0 0 #cfcfcf;
}

.tcdb-table-wrap > table > thead .tcdb-sticky-col,
.table-responsive > table > thead .tcdb-sticky-col,
.tcdb-table-wrap > table > thead th.tcdb-col-stt,
.table-responsive > table > thead th.tcdb-col-stt {
  position: sticky !important;
  left: 0 !important;
  z-index: 7 !important;
  background: #fff8e1 !important;
  box-shadow: 1px 0 0 #cfcfcf, inset 0 -1px 0 #cfcfcf;
}

.tcdb-table-wrap > table.tcdb-freeze-2 > thead .tcdb-sticky-col-2,
.table-responsive > table.tcdb-freeze-2 > thead .tcdb-sticky-col-2,
.tcdb-table-wrap > table.tcdb-freeze-2 > thead th.tcdb-col-text,
.table-responsive > table.tcdb-freeze-2 > thead th.tcdb-col-text {
  position: sticky !important;
  z-index: 7 !important;
  background: #fff8e1 !important;
  box-shadow: 1px 0 0 #cfcfcf, inset 0 -1px 0 #cfcfcf;
}

/* Cột chữ dài (hạng mục / nội dung): xuống dòng, không kéo bảng vô hạn */
.tcdb-wrap-text,
#dvGrid span[id*="Lbl_Hạng_mục"],
#dvGrid span[id*="Hạng_mục_công_việc"],
.tcdb-page-default span[id*="Lbl_Hạng_mục"],
.tcdb-page-default span[id*="Hạng_mục_công_việc"] {
  display: block !important;
  max-width: 26rem !important;
  width: 100% !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-wrap: break-word !important;
  word-break: break-word !important;
  line-height: 1.35 !important;
}

#dvGrid td.tcdb-col-text,
#dvGrid td#hạng_mục_bm1,
#dvGrid td:has(> span[id*="Lbl_Hạng_mục"]),
#dvGrid td:has(> .tcdb-wrap-text),
.tcdb-page-default td.tcdb-col-text,
.tcdb-page-default td#hạng_mục_bm1,
.tcdb-page-default table.tcdb-report-table tbody td:nth-child(2):not(.text-right):not([align="right"]) {
  max-width: 26rem !important;
  min-width: 10rem !important;
  width: 18rem !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  vertical-align: top !important;
}

/* Header cột dài: xuống dòng, thu hẹp chiều ngang */
#dvGrid table thead th,
#dvGrid table.tcdb-report-table thead th,
.tcdb-page-default table.tcdb-report-table thead th {
  white-space: normal !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
  line-height: 1.2 !important;
  vertical-align: middle !important;
}

#dvGrid table.tcdb-report-table thead th:not(.tcdb-col-stt):not(.tcdb-col-text),
.tcdb-page-default table.tcdb-report-table thead th:not(.tcdb-col-stt):not(.tcdb-col-text) {
  max-width: 5.25rem !important;
  min-width: 3.6rem !important;
}

#dvGrid table.tcdb-report-table thead th[colspan],
.tcdb-page-default table.tcdb-report-table thead th[colspan] {
  max-width: none !important;
  min-width: 0 !important;
}

#dvGrid table.tcdb-report-table thead th.tcdb-col-text,
.tcdb-page-default table.tcdb-report-table thead th.tcdb-col-text {
  max-width: 18rem !important;
  min-width: 10rem !important;
}

/* Báo cáo rộng: không bị ép 100% làm vỡ cột */
table.tcdb-report-table {
  width: max-content !important;
  max-width: none !important;
  min-width: 100%;
}

table.tcdb-summary-table {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  table-layout: fixed !important;
}

table.tcdb-summary-table td,
table.tcdb-summary-table th {
  width: 50% !important;
  min-width: 0 !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

#dvGrid table.table,
#dvGrid table.table-bordered,
#dvGrid .mGrid,
#dvGrid table.stickyTableHeaders {
  width: auto !important;
  max-width: none;
  min-width: 100%;
  background: #fff;
}

#dvGrid .tcdb-table-wrap > table.stickyTableHeaders,
#dvGrid .table-responsive > table.stickyTableHeaders,
#dvGrid .tcdb-table-wrap > table.table-bordered,
#dvGrid .table-responsive > table.table-bordered {
  width: max-content !important;
  max-width: none !important;
  min-width: 100%;
}

/* GridView / CHUDAUTU / mọi bảng dữ liệu: header + nội dung được xuống dòng */
#dvGrid .tcdb-table-wrap table.table th,
#dvGrid .tcdb-table-wrap table.table td,
#dvGrid .tcdb-table-wrap table.table-bordered th,
#dvGrid .tcdb-table-wrap table.table-bordered td,
#dvGrid .tcdb-table-wrap table.stickyTableHeaders th,
#dvGrid .tcdb-table-wrap table.stickyTableHeaders td,
#dvGrid .tcdb-table-wrap table.tcdb-data-table th,
#dvGrid .tcdb-table-wrap table.tcdb-data-table td,
#dvGrid table.tcdb-data-table th,
#dvGrid table.tcdb-data-table td {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-wrap: break-word !important;
  word-break: break-word !important;
  vertical-align: middle !important;
  line-height: 1.3 !important;
}

#dvGrid .tcdb-table-wrap table thead th,
#dvGrid table.tcdb-data-table thead th {
  max-width: 7.5rem !important;
  min-width: 3.25rem !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  text-align: center !important;
  background: #fff8e1 !important;
}

#dvGrid .tcdb-table-wrap table tbody td,
#dvGrid table.tcdb-data-table tbody td {
  max-width: 14rem !important;
}

#dvGrid .tcdb-table-wrap table .tcdb-sticky-col,
#dvGrid table.tcdb-data-table .tcdb-sticky-col {
  max-width: 5.5rem !important;
  min-width: 2.5rem !important;
}

#dvGrid .tcdb-table-wrap table .tcdb-sticky-col-2,
#dvGrid .tcdb-table-wrap table th.tcdb-col-text,
#dvGrid .tcdb-table-wrap table td.tcdb-col-text,
#dvGrid table.tcdb-data-table .tcdb-sticky-col-2 {
  max-width: 16rem !important;
  min-width: 8rem !important;
}

/* Cột số giữ 1 dòng */
#dvGrid .tcdb-table-wrap table td.text-right,
#dvGrid .tcdb-table-wrap table td[align="right"],
#dvGrid .tcdb-table-wrap table td[align="Right"],
#dvGrid .tcdb-table-wrap table th.text-right,
#dvGrid table.tcdb-data-table td.text-right,
#dvGrid table.tcdb-data-table td[align="right"],
#dvGrid table.tcdb-data-table td[align="Right"] {
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  max-width: none !important;
}

#dvGrid .tcdb-table-wrap table a,
#dvGrid .tcdb-table-wrap table span,
#dvGrid table.tcdb-data-table a,
#dvGrid table.tcdb-data-table span {
  white-space: inherit;
  overflow-wrap: inherit;
  word-break: inherit;
}

#dvGrid table.tcdb-summary-table {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  table-layout: fixed !important;
}

#dvGrid table.tcdb-summary-table td,
#dvGrid table.tcdb-summary-table th {
  width: 50% !important;
  min-width: 0 !important;
  max-width: none !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  padding: 0.4rem 0.65rem !important;
  text-align: left !important;
  vertical-align: top !important;
}

#dvGrid table.table-bordered th,
#dvGrid table.table-bordered td,
#dvGrid .mGrid th,
#dvGrid .mGrid td {
  vertical-align: middle;
}

.tableFloatingHeaderOriginal {
  background-color: #fff8e1 !important;
}

/* Filter tables (search criteria) */
#bangtimkiem,
table.tcdb-filter {
  width: 100% !important;
  max-width: 100% !important;
}

.div-group.flex {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.75rem;
}

/* Login */
.tcdb-login-wrap {
  min-height: 55vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}

.tcdb-login-card {
  width: 100%;
  max-width: 420px;
  border: 0;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.12);
  border-radius: 0.75rem;
  overflow: hidden;
}

.tcdb-login-card .card-header {
  background: linear-gradient(135deg, var(--tcdb-brand), var(--tcdb-brand-dark));
  color: #fff;
  text-align: center;
  padding: 1.25rem;
  border: 0;
}

.tcdb-login-card .card-header h1 {
  font-size: 1.15rem;
  margin: 0;
  font-weight: 700;
}

.tcdb-login-card .form-label {
  font-weight: 600;
  color: #2e7d32;
}

.tcdb-login-card .btn-login {
  background: var(--tcdb-brand);
  border-color: var(--tcdb-brand);
  width: 100%;
  font-weight: 700;
  padding: 0.6rem;
}

.tcdb-login-card .btn-login:hover {
  background: var(--tcdb-brand-dark);
  border-color: var(--tcdb-brand-dark);
}

/* Multiselect / Chosen compatibility under BS5 */
.multiselect-container {
  z-index: 1060 !important;
}

.btn-group .multiselect {
  max-width: 100%;
}

.chosen-container {
  max-width: 100% !important;
}

/* Chosen copies select offsetWidth (often ~18px when empty) — force full cell width in forms */
.tcdb-form .chosen-container,
.tcdb-form-grid-2 .chosen-container,
.tcdb-form-grid-3 .chosen-container,
.tcdb-form-grid-4 .chosen-container {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}
.tcdb-form .tcdb-year-select + .chosen-container {
  width: 8rem !important;
  max-width: 8rem !important;
}
.tcdb-form .chosen-container-single .chosen-single {
  height: auto;
  min-height: 38px;
  line-height: 1.5;
  padding: 0.375rem 0.75rem;
}
.tcdb-form .chosen-container-single .chosen-single div {
  top: 0;
  bottom: 0;
  width: 2rem;
}
.tcdb-form .chosen-container-single .chosen-single span {
  margin-right: 1.75rem;
}

/* Fix BS5 row inside theme */
#dvGrid > .row,
#dvGrid .row {
  --bs-gutter-x: 1rem;
  margin-left: calc(var(--bs-gutter-x) * -0.5);
  margin-right: calc(var(--bs-gutter-x) * -0.5);
}

#dvGrid [class*="col-"] {
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  min-width: 0;
  max-width: 100%;
}

/* ===== Responsive ===== */
@media (max-width: 991.98px) {
  .tcdb-banner-row2 .menu-toggle {
    display: inline-flex !important;
  }

  .tcdb-nav-bar {
    display: none !important;
  }

  /* Hide empty nav strip until menu opens */
  .tcdb-nav-wrap:not(.menu-open) {
    min-height: 0 !important;
    border-bottom-width: 0 !important;
  }

  .tcdb-nav-wrap.menu-open {
    border-bottom: 2px solid #B53852 !important;
  }

  ul.srt-menu {
    display: none;
    flex-direction: column;
    width: 100%;
    background: var(--tcdb-menu-bg) !important;
  }

  ul.srt-menu.toggled-on,
  #topnav.menu-open ul.srt-menu,
  .tcdb-nav-wrap.menu-open ul.srt-menu {
    display: flex !important;
  }

  ul.srt-menu > li {
    width: 100%;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  ul.srt-menu > li > a {
    white-space: normal;
    padding: 0.85rem 1rem !important;
  }

  ul.srt-menu li ul {
    position: static;
    display: none;
    width: 100%;
    min-width: 0;
    box-shadow: none;
    border-radius: 0;
    background: #3d0c1c !important;
    padding: 0;
  }

  ul.srt-menu li.open > ul {
    display: block;
  }

  ul.srt-menu li ul li a {
    color: #f1f3f5 !important;
    padding: 0.65rem 1.25rem 0.65rem 1.75rem !important;
  }

  ul.srt-menu li ul li a:hover {
    background: var(--tcdb-menu-hover) !important;
    color: #fff !important;
  }

  #dvGrid.tttn-page {
    padding: 0.75rem;
    border-radius: 0.35rem;
  }
}

@media (max-width: 767.98px) {
  .tcdb-header {
    padding: 0.5rem;
  }

  #doituongbi_an #logo_desktop {
    display: none !important;
  }

  #bangtimkiem,
  table.tcdb-filter,
  table.mGrid:not(.stickyTableHeaders) {
    display: block;
    width: 100% !important;
  }

  #bangtimkiem tbody,
  #bangtimkiem tr,
  table.tcdb-filter tbody,
  table.tcdb-filter tr {
    display: block;
    width: 100% !important;
  }

  #bangtimkiem td,
  table.tcdb-filter td {
    display: block;
    width: 100% !important;
    text-align: left !important;
    padding: 0.35rem 0 !important;
    border: 0 !important;
  }

  #bangtimkiem td[align="right"],
  table.tcdb-filter td[align="right"] {
    font-weight: 600;
    color: #495057;
    padding-bottom: 0.1rem !important;
  }

  /* Stack form label/value tables commonly used in Admin */
  #dvGrid table[bgcolor="#F5F4EB"] td,
  #dvGrid table[bgcolor="#f5f4eb"] td {
    display: block;
    width: 100% !important;
    text-align: left !important;
  }

  #dvGrid table[bgcolor="#F5F4EB"] td.tblgia,
  #dvGrid table[bgcolor="#f5f4eb"] td.tblgia {
    font-weight: 600;
    padding-top: 0.65rem !important;
  }

  input[style*="width"],
  select[style*="width"],
  .aspNetDisabled {
    max-width: 100% !important;
  }

  #dvGrid input[type="text"],
  #dvGrid select,
  #dvGrid textarea {
    width: 100% !important;
    box-sizing: border-box;
  }

  #dvGrid input[style*="Width"],
  #dvGrid select[style*="Width"] {
    width: 100% !important;
  }

  .div-group.flex {
    flex-direction: column;
  }

  .nowrap,
  [nowrap] {
    white-space: normal !important;
  }
}

@media (max-width: 575.98px) {
  #dvGrid h3 {
    font-size: 1rem;
  }

  .tcdb-login-wrap {
    padding: 1rem 0.5rem;
  }
}

/* Print */
@media print {
  .tcdb-nav-wrap,
  .tcdb-header #user,
  #topnav .menu-toggle,
  footer {
    display: none !important;
  }

  #dvGrid.tttn-page {
    box-shadow: none;
    padding: 0;
  }
}

/* Override theme .container-fluid fixed height (added.css) */
.tcdb-header .container-fluid,
header .container-fluid {
  background: transparent !important;
  height: auto !important;
  padding: 0.25rem 0.75rem !important;
}

/* Multiselect under Bootstrap 5 */
.btn-group.multiselect-container,
.multiselect-native-select .btn-group {
  max-width: 100%;
}

.multiselect.dropdown-toggle::after {
  margin-left: 0.5em;
}

.multiselect-container.dropdown-menu {
  max-height: 280px;
  overflow-y: auto;
}

/* =========================================================
   FORCE overrides vs added.css / basic-style3 (!important)
   ========================================================= */
body#home,
body {
  background-color: #f4f6f8 !important;
  background-image: none !important;
}

header.tcdb-header,
.tcdb-header {
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0.45rem 0.75rem !important;
  background: linear-gradient(135deg, #8B1E3D 0%, #6B1530 100%) !important;
  color: #fff !important;
}

.tcdb-header #banner,
.tcdb-header .container-fluid,
header .container-fluid {
  float: none !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 auto !important;
  text-align: left !important;
}

/* Row 1: brand (left) + user (right) */
.tcdb-banner-row1 {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.75rem !important;
  width: 100% !important;
  min-height: 52px !important;
}

.tcdb-brand,
#doituongbi_an {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0.65rem !important;
  flex-wrap: nowrap !important;
  width: auto !important;
  max-width: 70% !important;
  float: none !important;
  margin: 0 !important;
}

#logo_desktop {
  float: none !important;
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  flex: 0 0 48px !important;
  margin: 0 !important;
}

.content-header {
  float: none !important;
  margin: 0 !important;
  width: auto !important;
  max-width: 100% !important;
  background: transparent !important;
  text-align: left !important;
}

.tcdb-header .content-header,
.tcdb-header .content-header h2,
.tcdb-header .content-header h3,
.tcdb-header #doituongbi_an h2,
.tcdb-header #doituongbi_an h3 {
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35) !important;
  background: transparent !important;
  text-align: left !important;
}

.tcdb-header .content-header h3 {
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}

.tcdb-header .content-header h2 {
  font-size: clamp(0.95rem, 1.8vw, 1.25rem) !important;
  font-weight: 700 !important;
  margin: 0 !important;
  line-height: 1.25 !important;
}

.tcdb-user-bar,
.tcdb-header #user {
  position: static !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: right !important;
  color: #fff !important;
  font-size: 0.85rem !important;
  white-space: nowrap !important;
  flex: 0 0 auto !important;
}

.tcdb-header #user a {
  color: #ffe082 !important;
  text-decoration: none !important;
}

.tcdb-header #user a:hover {
  text-decoration: underline !important;
}

.tcdb-user-sep {
  margin: 0 0.25rem;
  opacity: 0.7;
}

/* Row 2: system title + Menu button */
.tcdb-banner-row2 {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.75rem !important;
  width: 100% !important;
  margin-top: 0.25rem !important;
  padding-top: 0.25rem !important;
  border-top: 1px solid rgba(255, 255, 255, 0.18) !important;
}

.title-header {
  float: none !important;
  width: auto !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  text-align: left !important;
  color: #ffe082 !important;
  font-size: clamp(0.75rem, 1.5vw, 0.95rem) !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35) !important;
  background: transparent !important;
  line-height: 1.35 !important;
}

.tcdb-banner-row2 .menu-toggle,
#btnMenuToggle.menu-toggle {
  display: none;
  flex: 0 0 auto !important;
  align-items: center !important;
  gap: 0.35rem !important;
  margin: 0 0 0 auto !important;
  float: none !important;
  width: auto !important;
  background: #A02848 !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 0.35rem !important;
  padding: 0.4rem 0.7rem !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}

/* Nav bar */
.tcdb-nav-wrap {
  clear: both !important;
  width: 100% !important;
  float: none !important;
  background: #6B1530 !important;
  border-bottom: 2px solid #B53852 !important;
}

#topnav {
  float: none !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 auto !important;
  background: transparent !important;
  filter: none !important;
  position: relative !important;
  padding: 0 0.5rem !important;
}

.tcdb-nav-bar {
  display: none;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  min-height: 44px;
  padding: 0.25rem 0;
}

#topnav .menu-toggle {
  display: none;
  align-items: center;
  gap: 0.4rem;
  width: auto !important;
  margin-left: auto !important;
  float: none !important;
  background: #A02848 !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 0.35rem !important;
  padding: 0.45rem 0.75rem !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  cursor: pointer !important;
  text-align: center !important;
}

#topnav .menu-toggle::after {
  content: none !important;
}

.menu-toggle-icon {
  display: inline-block;
  width: 1.15rem;
  height: 1.15rem;
  position: relative;
}

.menu-toggle-icon::before,
.menu-toggle-icon::after,
.menu-toggle-icon {
  box-sizing: border-box;
}

.menu-toggle-icon::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0.15rem;
  height: 2px;
  background: #fff;
  box-shadow: 0 0.3rem 0 #fff, 0 0.6rem 0 #fff;
}

.menu-toggle.toggled-on .menu-toggle-icon::before {
  top: 0.5rem;
  box-shadow: none;
  transform: rotate(45deg);
}

.menu-toggle.toggled-on .menu-toggle-icon::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0.5rem;
  height: 2px;
  background: #fff;
  transform: rotate(-45deg);
}

ul.srt-menu,
.srt-menu {
  float: none !important;
  width: 100% !important;
  display: flex !important;
  flex-wrap: wrap !important;
  background: transparent !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

ul.srt-menu > li,
.srt-menu > li {
  float: none !important;
  background: transparent !important;
  position: relative !important;
}

ul.srt-menu > li > a,
.srt-menu > li > a,
.srt-menu li a {
  color: #fff !important;
  background: transparent !important;
  font-size: 0.85rem !important;
  display: block !important;
  padding: 0.65rem 0.85rem !important;
  text-decoration: none !important;
}

ul.srt-menu > li > a:hover,
.srt-menu li:hover > a,
.srt-menu li a:hover {
  color: #fff !important;
  background: #A02848 !important;
}

ul.srt-menu li ul {
  display: none !important;
  position: absolute !important;
  left: 0 !important;
  top: 100% !important;
  min-width: 240px !important;
  z-index: 1100 !important;
  background: #fff !important;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
  padding: 0.25rem 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

ul.srt-menu li:hover > ul,
ul.srt-menu li.sfHover > ul,
ul.srt-menu li.open > ul,
.srt-menu li:hover ul,
.srt-menu li.sfHover ul {
  display: block !important;
  left: 0 !important;
  background: #fff !important;
}

ul.srt-menu li ul li a,
.srt-menu li ul li a {
  color: #212529 !important;
  background: transparent !important;
  white-space: normal !important;
}

ul.srt-menu li ul li a:hover,
.srt-menu li ul li:hover a {
  color: #8B1E3D !important;
  background: #f1f3f5 !important;
}

#hero.tcdb-main,
#hero {
  float: none !important;
  width: 100% !important;
  clear: both !important;
  background: #f4f6f8 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0.25rem 0 0.75rem !important;
  border: 0 !important;
}

#hero .wrapper,
.tcdb-main .wrapper {
  float: none !important;
  max-width: none !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0.25rem 0.5rem 0.5rem !important;
  height: auto !important;
  background: transparent !important;
  box-shadow: none !important;
  margin: 0 !important;
}

#dvGrid.tttn-page {
  background: #fff !important;
  border-radius: 0.5rem !important;
  box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.06) !important;
  padding: 1rem !important;
  min-height: 0 !important;
  height: auto !important;
  overflow: visible !important;
}

/* Login page */
body.page-login {
  background: #f4f6f8 !important;
}

body.page-login .tcdb-header {
  background: linear-gradient(135deg, #8B1E3D 0%, #6B1530 100%) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

body.page-login #dvGrid.tttn-page {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  min-height: 0 !important;
}

body.page-login #hero.tcdb-main,
body.page-login #hero {
  background: #f4f6f8 !important;
  min-height: auto !important;
  padding-top: 0 !important;
}

.tcdb-login-wrap {
  min-height: 50vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 1.5rem 1rem 2.5rem !important;
  width: 100% !important;
}

.tcdb-login-card,
div.tcdb-login-card.card {
  width: 100% !important;
  max-width: 420px !important;
  margin: 0 auto !important;
  border: 0 !important;
  border-radius: 0.75rem !important;
  box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.18) !important;
  background: #fff !important;
  overflow: hidden !important;
  float: none !important;
}

.tcdb-login-card .card-header {
  background: linear-gradient(135deg, #8B1E3D, #6B1530) !important;
  color: #fff !important;
  text-align: center !important;
  padding: 1.25rem 1rem !important;
  border: 0 !important;
  border-radius: 0 !important;
}

.tcdb-login-card .card-header h1 {
  font-size: 1.2rem !important;
  margin: 0 !important;
  font-weight: 700 !important;
  color: #fff !important;
  line-height: 1.35 !important;
}

.tcdb-login-card .card-body {
  padding: 1.5rem !important;
  background: #fff !important;
}

.tcdb-login-card .form-label {
  font-weight: 600 !important;
  color: #2e7d32 !important;
  display: block !important;
  margin-bottom: 0.35rem !important;
}

.tcdb-login-card .form-control,
.tcdb-login-card input.form-control {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  box-sizing: border-box !important;
  height: auto !important;
  min-height: 44px !important;
  border: 1px solid #ced4da !important;
  border-radius: 0.375rem !important;
  padding: 0.55rem 0.75rem !important;
  font-size: 1rem !important;
  background: #fff !important;
}

.tcdb-login-card .btn-login,
.tcdb-login-card input.btn-login {
  width: 100% !important;
  background: #8B1E3D !important;
  border-color: #8B1E3D !important;
  color: #fff !important;
  font-weight: 700 !important;
  padding: 0.65rem 1rem !important;
  border-radius: 0.375rem !important;
  font-size: 1rem !important;
}

.tcdb-login-card .btn-login:hover {
  background: #6B1530 !important;
  border-color: #6B1530 !important;
}

/* Mobile / tablet */
@media (max-width: 991.98px) {
  .tcdb-nav-bar {
    display: none !important;
  }

  .tcdb-banner-row2 .menu-toggle,
  #btnMenuToggle.menu-toggle {
    display: inline-flex !important;
  }

  #topnav .menu-toggle {
    display: none !important;
  }

  .tcdb-nav-wrap:not(.menu-open) {
    border-bottom-width: 0 !important;
    min-height: 0 !important;
  }

  ul.srt-menu,
  .srt-menu {
    display: none !important;
    flex-direction: column !important;
    width: 100% !important;
    background: #5a1229 !important;
  }

  ul.srt-menu.toggled-on,
  #topnav.menu-open ul.srt-menu,
  .tcdb-nav-wrap.menu-open ul.srt-menu {
    display: flex !important;
  }

  ul.srt-menu > li {
    width: 100% !important;
    border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
  }

  ul.srt-menu > li > a {
    white-space: normal !important;
    padding: 0.85rem 1rem !important;
  }

  ul.srt-menu li ul {
    position: static !important;
    display: none !important;
    width: 100% !important;
    min-width: 0 !important;
    box-shadow: none !important;
    background: #3d0c1c !important;
  }

  ul.srt-menu li.open > ul {
    display: block !important;
  }

  /* Disable hover-open on touch/mobile to avoid sticky menus */
  ul.srt-menu li:hover > ul {
    display: none !important;
  }

  ul.srt-menu li.open:hover > ul,
  ul.srt-menu li.open > ul {
    display: block !important;
  }

  ul.srt-menu li ul li a {
    color: #f1f3f5 !important;
    padding: 0.65rem 1.25rem 0.65rem 1.75rem !important;
  }

  ul.srt-menu li ul li a:hover {
    background: #A02848 !important;
    color: #fff !important;
  }

  .tcdb-banner-row1 {
    min-height: 44px !important;
  }

  #logo_desktop {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    flex-basis: 40px !important;
  }

  .tcdb-header .content-header h3 {
    font-size: 0.72rem !important;
  }

  .tcdb-header .content-header h2 {
    font-size: 0.95rem !important;
  }

  .title-header {
    font-size: 0.78rem !important;
  }

  .tcdb-user-bar,
  .tcdb-header #user {
    font-size: 0.75rem !important;
    white-space: normal !important;
    text-align: right !important;
    max-width: 42% !important;
  }
}

@media (max-width: 575.98px) {
  .tcdb-brand {
    max-width: 58% !important;
  }

  #logo_desktop {
    display: none !important;
  }
}


/* Full width layout - no content max-width cap */
#hero.tcdb-main,
#hero,
section#hero {
  max-width: none !important;
  width: 100% !important;
}
.wrapper,
#hero .wrapper,
.tcdb-main .wrapper,
#hero > .wrapper,
section#hero .wrapper,
#footer .wrapper,
.tcdb-header #banner,
.tcdb-header .container-fluid,
#topnav,
.tcdb-nav-wrap {
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

@media only screen and (min-width: 920px) {
  .wrapper,
  #hero .wrapper,
  .tcdb-main .wrapper {
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}


/* Action button rows: no BS .row (negative margin clips left) */
.fLeft { float: left; }
.padR6 { padding-right: 6px; }

#dvGrid .tcdb-btn-row,
.tcdb-btn-row,
#dvGrid .row.tcdb-btn-row,
#dvGrid div.tcdb-btn-row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0.45rem 0.5rem !important;
  margin: 0 0 0.5rem 0 !important;
  padding: 0.55rem 0.15rem !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  float: none !important;
  --bs-gutter-x: 0 !important;
  --bs-gutter-y: 0 !important;
  background: #fff;
}

.tcdb-btn-group {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0.4rem 0.5rem !important;
  min-width: 0 !important;
  max-width: 100% !important;
  flex: 1 1 auto !important;
}

.tcdb-btn-label {
  font-weight: 600;
  white-space: nowrap;
  margin: 0 !important;
}

#dvGrid .tcdb-btn-row > *,
.tcdb-btn-row > *,
#dvGrid .tcdb-btn-group > *,
.tcdb-btn-group > * {
  width: auto !important;
  max-width: 100% !important;
  flex: 0 0 auto !important;
  float: none !important;
  margin: 0 !important;
}

#dvGrid .tcdb-btn-row > .tcdb-btn-group,
.tcdb-btn-row > .tcdb-btn-group {
  flex: 1 1 100% !important;
  width: 100% !important;
  max-width: 100% !important;
}

#dvGrid .tcdb-btn-row select,
#dvGrid .tcdb-btn-row .form-select,
.tcdb-btn-row select,
.tcdb-btn-row .form-select {
  width: auto !important;
  min-width: 10rem;
  max-width: 100% !important;
}

#dvGrid .tcdb-btn-row input[type="submit"],
#dvGrid .tcdb-btn-row input[type="button"],
#dvGrid .tcdb-btn-row .button,
#dvGrid .tcdb-btn-row .btn,
#dvGrid .tcdb-btn-row .admin_btnShareOr {
  display: inline-block !important;
  width: auto !important;
  white-space: nowrap !important;
}

#dvGrid .row.text-center > table,
#dvGrid .row.text-center > .tcdb-table-wrap,
#dvGrid .row.text-center > .table-responsive,
#dvGrid .row.text-center > .tcdb-summary-wrap {
  width: 100% !important;
  max-width: 100% !important;
  flex: 1 1 100% !important;
  min-width: 0 !important;
}

#dvGrid .row.text-center > .fLeft,
#dvGrid .tcdb-btn-row > .fLeft,
.tcdb-btn-row .fLeft {
  display: inline-flex !important;
  align-items: center !important;
  float: none !important;
  padding-right: 0.35rem !important;
}

#dvGrid .row.text-center .button,
#dvGrid .tcdb-btn-row .button,
#dvGrid .tcdb-btn-row input.button,
#dvGrid .tcdb-btn-row .btn,
.tcdb-btn-row .button,
.tcdb-btn-row .btn {
  display: inline-block !important;
  width: auto !important;
  margin: 0 0.15rem !important;
  white-space: nowrap !important;
}

#dvGrid .row.text-center label,
#dvGrid .tcdb-btn-row label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
  margin: 0 !important;
  width: auto !important;
}

/* Legacy button bars (nguoi_dung, …) */
#dvGrid .padB20.padT10,
#dvGrid div.padT10.padB20 {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0.4rem 0.5rem !important;
  clear: both !important;
}

#dvGrid .padB20.padT10 > .fLeft,
#dvGrid div.padT10.padB20 > .fLeft {
  float: none !important;
  display: inline-flex !important;
}


/* Notice / error text - wrap within page, never overflow */
#dvGrid .error,
#dvGrid span.error,
#dvGrid .tcdb-note-error,
.error {
  color: #c62828 !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-wrap: break-word !important;
  word-break: break-word !important;
  line-height: 1.45 !important;
  text-align: left !important;
  box-sizing: border-box !important;
}

.tcdb-note-box {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  background: #fff8e1 !important;
  border: 1px solid #ffe082 !important;
  border-radius: 0.375rem !important;
  padding: 0.65rem 0.85rem !important;
  margin: 0.5rem 0 0.75rem !important;
  overflow: hidden !important;
}

.tcdb-note-box .tcdb-note-muted,
.tcdb-note-box p {
  margin: 0 0 0.4rem !important;
  color: #5d4037 !important;
  font-size: 0.9rem !important;
  line-height: 1.45 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  text-align: left !important;
}

.tcdb-note-box .tcdb-note-error,
.tcdb-note-box .error {
  margin: 0 !important;
  color: #c62828 !important;
  font-weight: 600 !important;
}

/* Do not keep long notes as rigid flex items in button rows */
#dvGrid .tcdb-btn-row > .error,
#dvGrid .row.text-center > .error,
#dvGrid .tcdb-btn-row > span.error {
  flex: 1 1 100% !important;
  width: 100% !important;
  max-width: 100% !important;
}


/* Tighten gap between header/nav and content */
header.tcdb-header,
.tcdb-header {
  padding: 0.35rem 0.6rem !important;
}
.tcdb-banner-row2 {
  margin-top: 0.15rem !important;
  padding-top: 0.15rem !important;
}
.tcdb-nav-wrap {
  margin: 0 !important;
  padding: 0 !important;
}
.tcdb-nav-wrap:not(.menu-open) {
  border-bottom-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
}
#topnav {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
}
#hero.tcdb-main,
#hero,
section#hero.tcdb-main,
section#hero {
  margin: 0 !important;
  padding: 0.25rem 0 0.75rem !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  background-image: none !important;
  min-height: 0 !important;
}
#hero .wrapper,
.tcdb-main .wrapper,
section#hero .wrapper {
  margin: 0 !important;
  padding: 0.25rem 0.5rem 0.5rem !important;
}
#dvGrid.tttn-page {
  margin-top: 0 !important;
  padding: 0.65rem !important;
  min-height: 0 !important;
  border-radius: 0.35rem !important;
}
body.page-login #hero.tcdb-main,
body.page-login #hero {
  padding: 0.25rem 0 0.5rem !important;
}

/* BS3 clearfix on .row conflicts with BS5 flex: ::before becomes a flex item (~full row gap) */
.row::before,
.row::after,
.clearfix::before,
.clearfix::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  float: none !important;
  clear: none !important;
}

#top.row,
div#top.row,
.row#top {
  margin-top: 0 !important;
  margin-bottom: 0.35rem !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  --bs-gutter-y: 0 !important;
}

#top.row > [class*="col-"],
div#top.row > [class*="col-"] {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

#top .card,
#top .card-header {
  margin-top: 0 !important;
}

#top .card-header {
  padding-top: 0.35rem !important;
  padding-bottom: 0 !important;
}

#top .nav-tabs {
  margin-bottom: 0 !important;
}

/* ===== Entry forms (no table layout) ===== */
.tcdb-form {
  background: #f5f4eb;
  border: 1px solid #e4e1d4;
  border-radius: 0.4rem;
  padding: 0.85rem 1rem;
  margin-bottom: 0.75rem;
}
.tcdb-form-row {
  display: grid;
  grid-template-columns: minmax(140px, 220px) 1fr;
  gap: 0.45rem 0.85rem;
  align-items: start;
  padding: 0.55rem 0;
  border-bottom: 1px solid #ebe7da;
}
.tcdb-form-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.tcdb-form-label {
  font-weight: 600;
  color: #333;
  padding-top: 0.35rem;
  line-height: 1.35;
}
.tcdb-form-field {
  min-width: 0;
}
.tcdb-form-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.65rem;
  max-width: 100%;
}
.tcdb-form-wrap {
  flex-wrap: wrap;
}
.tcdb-form-hint {
  font-size: 0.9rem;
  line-height: 1.4;
  max-width: 52rem;
}
.tcdb-form-alert {
  margin-bottom: 0.75rem;
  padding: 0.55rem 0.75rem;
  background: #fff8f0;
  border: 1px solid #f0d9b8;
  border-radius: 0.3rem;
  line-height: 1.45;
}
.tcdb-form-panel {
  margin: 0.25rem 0;
  padding: 0.25rem 0.5rem;
  background: rgba(255, 255, 255, 0.45);
  border-radius: 0.3rem;
}
.tcdb-form-grid-2,
.tcdb-form-grid-3,
.tcdb-form-grid-4 {
  display: grid;
  gap: 0.55rem 0.75rem;
}
.tcdb-form-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tcdb-form-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tcdb-form-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tcdb-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  margin-right: 0.25rem;
  border-radius: 50%;
  background: #0d6efd;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  vertical-align: middle;
}
.tcdb-year-select {
  max-width: 8rem;
  font-size: 1.15rem !important;
  font-weight: 700;
}
.tcdb-form .form-control,
.tcdb-form .form-select {
  width: auto;
  min-width: 0;
  max-width: 100%;
}
.tcdb-form .form-control:not([style*="max-width"]),
.tcdb-form textarea.form-control {
  width: 100%;
  max-width: 100%;
}
/* Grid selects must fill the cell (empty/short options otherwise collapse with width:auto) */
.tcdb-form .tcdb-form-grid-2 .form-select,
.tcdb-form .tcdb-form-grid-3 .form-select,
.tcdb-form .tcdb-form-grid-4 .form-select,
.tcdb-form .tcdb-form-grid-2 .form-control,
.tcdb-form .tcdb-form-grid-3 .form-control,
.tcdb-form .tcdb-form-grid-4 .form-control {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.tcdb-form .form-select {
  padding: 0.375rem 2.25rem 0.375rem 0.75rem;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
}
.tcdb-form .tcdb-form-inline .form-select {
  min-width: 10rem;
}
.tcdb-radio-inline label,
.tcdb-radio-inline span {
  margin-right: 0.75rem;
}
.tcdb-form .button,
.tcdb-form .upload_docs {
  white-space: nowrap;
}

@media (max-width: 991.98px) {
  .tcdb-form-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tcdb-form-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
  .tcdb-form {
    padding: 0.65rem 0.7rem;
  }
  .tcdb-form-row {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }
  .tcdb-form-label {
    padding-top: 0;
  }
  .tcdb-form-grid-2,
  .tcdb-form-grid-3,
  .tcdb-form-grid-4 {
    grid-template-columns: 1fr;
  }
  .tcdb-year-select {
    max-width: 100%;
  }
  .tcdb-form .tcdb-form-inline .form-control,
  .tcdb-form .tcdb-form-inline .form-select {
    width: 100%;
    max-width: 100% !important;
  }
}


.tcdb-form-title {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 0.65rem;
  color: #222;
}

/* ===== Edge-to-edge workspace + no button/table overflow ===== */
html,
body,
body#home {
  max-width: 100%;
  overflow-x: hidden;
}

#hero.tcdb-main,
#hero,
section#hero,
#hero .wrapper,
.tcdb-main .wrapper,
section#hero .wrapper,
#dvGrid.tttn-page,
#dvGrid .row,
#dvGrid [class*="col-"],
#dvGrid .tcdb-page-default {
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

#hero .wrapper,
.tcdb-main .wrapper,
section#hero .wrapper {
  padding: 0.2rem 0.35rem 0.4rem !important;
}

#dvGrid.tttn-page {
  padding: 0.5rem 0.45rem !important;
  overflow-x: hidden !important;
}

#dvGrid > .row,
#dvGrid .row {
  --bs-gutter-x: 0.5rem;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

#dvGrid [class*="col-"] {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

#dvGrid .row.g-0 > [class*="col-"],
#dvGrid .tcdb-page-default > [class*="col-"] {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Summary KPIs: always use full workspace width */
.tcdb-summary-wrap {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 0.75rem !important;
}

#dvGrid table.tcdb-summary-table,
#dvGrid .tcdb-summary-wrap > table,
#dvGrid .row.text-center > table.tcdb-summary-table {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  table-layout: fixed !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

#dvGrid .tcdb-table-wrap:has(> table.tcdb-summary-table),
#dvGrid .table-responsive:has(> table.tcdb-summary-table) {
  width: 100% !important;
  max-width: 100% !important;
  overflow: visible !important;
  max-height: none !important;
  border: 0 !important;
}

#dvGrid .tcdb-table-wrap > table.tcdb-summary-table,
#dvGrid .table-responsive > table.tcdb-summary-table {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

/* Filter toolbar: wrap controls, never push buttons off-screen */
#dvGrid #bangtimkiem,
#dvGrid table.tcdb-filter,
#dvGrid .tcdb-page-default #bangtimkiem,
#dvGrid .tcdb-page-default table.tcdb-filter {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
}

#dvGrid #bangtimkiem tbody,
#dvGrid #bangtimkiem tr,
#dvGrid table.tcdb-filter tbody,
#dvGrid table.tcdb-filter tr {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0.3rem 0.55rem !important;
  width: 100% !important;
}

#dvGrid #bangtimkiem td,
#dvGrid table.tcdb-filter td,
#dvGrid .tcdb-page-default #bangtimkiem td,
#dvGrid .tcdb-page-default table.tcdb-filter td {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0.3rem 0.4rem !important;
  width: auto !important;
  max-width: 100% !important;
  white-space: normal !important;
  border: 0 !important;
  padding: 0.2rem 0 !important;
  box-sizing: border-box !important;
}

#dvGrid #bangtimkiem .button,
#dvGrid table.tcdb-filter .button,
#dvGrid #bangtimkiem input.button,
#dvGrid table.tcdb-filter input.button,
#dvGrid .tcdb-filter-actions .button {
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

#dvGrid #bangtimkiem select,
#dvGrid table.tcdb-filter select,
#dvGrid #bangtimkiem input[type="text"],
#dvGrid table.tcdb-filter input[type="text"] {
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

#dvGrid .tcdb-filter-actions,
#dvGrid #bangtimkiem td:last-child,
#dvGrid table.tcdb-filter td:last-child {
  flex: 1 1 auto !important;
  min-width: min(100%, 14rem) !important;
  width: auto !important;
  max-width: 100% !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0.4rem !important;
}

#dvGrid .tcdb-filter-actions select,
#dvGrid #bangtimkiem td:last-child select,
#dvGrid table.tcdb-filter td:last-child select {
  flex: 1 1 12rem !important;
  min-width: 0 !important;
  max-width: 100% !important;
  width: auto !important;
}

#dvGrid .multiselect-native-select,
#dvGrid .btn-group,
#dvGrid .chosen-container {
  max-width: 100% !important;
}

/* Data tables stay inside the workspace and scroll horizontally */
#dvGrid .tcdb-table-wrap,
#dvGrid .table-responsive {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

@media (max-width: 991.98px) {
  header.tcdb-header,
  .tcdb-header {
    padding: 0.3rem 0.4rem !important;
  }

  .tcdb-header .container-fluid,
  header .container-fluid {
    padding: 0.15rem 0.2rem !important;
  }

  #hero.tcdb-main,
  #hero,
  section#hero {
    padding: 0 0 0.4rem !important;
  }

  #hero .wrapper,
  .tcdb-main .wrapper,
  section#hero .wrapper {
    padding: 0 !important;
  }

  #dvGrid.tttn-page {
    padding: 0.45rem 0.4rem !important;
    border-radius: 0 !important;
  }

  #dvGrid > .row,
  #dvGrid .row {
    --bs-gutter-x: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  #dvGrid [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

@media (max-width: 767.98px) {
  #dvGrid.tttn-page {
    padding: 0.4rem 0.35rem !important;
  }

  #dvGrid #bangtimkiem td,
  #dvGrid table.tcdb-filter td,
  #dvGrid .tcdb-page-default #bangtimkiem td,
  #dvGrid .tcdb-page-default table.tcdb-filter td {
    flex: 1 1 auto !important;
  }

  #dvGrid #bangtimkiem td[align="right"],
  #dvGrid table.tcdb-filter td[align="right"] {
    flex: 1 1 100% !important;
    width: 100% !important;
    font-weight: 600;
    padding-bottom: 0 !important;
  }

  #dvGrid #bangtimkiem input[type="text"],
  #dvGrid #bangtimkiem select,
  #dvGrid table.tcdb-filter input[type="text"],
  #dvGrid table.tcdb-filter select {
    width: auto !important;
    max-width: 100% !important;
  }

  #dvGrid button,
  #dvGrid input,
  #dvGrid select,
  #dvGrid textarea,
  #dvGrid .button,
  #dvGrid input.button {
    max-width: 100% !important;
  }

  #dvGrid .button,
  #dvGrid input.button,
  #dvGrid input[type="submit"],
  #dvGrid input[type="button"] {
    width: auto !important;
  }

  #dvGrid .tcdb-filter-actions,
  #dvGrid #bangtimkiem td:last-child,
  #dvGrid table.tcdb-filter td:last-child {
    flex: 1 1 100% !important;
    width: 100% !important;
  }

  table.tcdb-summary-table td,
  #dvGrid table.tcdb-summary-table td {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (min-width: 992px) {
  #hero .wrapper,
  .tcdb-main .wrapper,
  section#hero .wrapper {
    padding: 0.2rem 0.45rem 0.45rem !important;
  }

  #dvGrid.tttn-page {
    padding: 0.55rem 0.6rem !important;
  }
}

/* UpdatePanel: added.css used padding 10px 30px — too much left/right inset */
#ctl00_maincontent_UpdatePanel_manager_VTTB,
[id$="UpdatePanel_manager_VTTB"] {
  padding: 0.35rem 0.45rem !important;
  box-sizing: border-box !important;
  max-width: 100% !important;
}

@media (max-width: 991.98px) {
  #ctl00_maincontent_UpdatePanel_manager_VTTB,
  [id$="UpdatePanel_manager_VTTB"] {
    padding: 0.25rem 0.3rem !important;
  }
}

@media (max-width: 767.98px) {
  #ctl00_maincontent_UpdatePanel_manager_VTTB,
  [id$="UpdatePanel_manager_VTTB"] {
    padding: 0.2rem 0.25rem !important;
  }
}