/* Custom styles goes here */

/* Prevent horizontal layout shift caused by scrollbar appearing/disappearing
   (e.g. during AJAX tab switches when content height changes).
   scrollbar-gutter: stable reserves the scrollbar track width permanently. */
html {
    scrollbar-gutter: stable;
}

/* Bootstrap 5 mở modal sẽ tự thêm padding-right vào <body> bằng đúng width của
   scrollbar (để bù chỗ scrollbar mất khi nó set overflow:hidden). Nhưng vì
   scrollbar-gutter: stable đã reserve gutter permanent, scrollbar không thực sự
   biến mất → padding bù trở thành dư thừa, đẩy nội dung co vào trong. Đóng modal
   padding bị xoá → content nhảy ra ngoài → giật ngang. Override ép padding=0.
   SweetAlert2 cũng làm điều tương tự (body.swal2-shown + .swal2-height-auto)
   → áp cùng fix. */
body.modal-open,
body.swal2-shown,
body.swal2-height-auto {
    padding-right: 0 !important;
}

/* Phase V.3: SweetAlert2 z-index fix — Sneat layout có element z-index ≥ 1080
   (navbar fixed, layout-menu, ...). Default Swal2 container z-index quá thấp →
   modal bị che sau navbar/menu hoặc render lệch dưới cùng trang. Bump cao hơn
   Bootstrap modal (1055) + Sneat (~1090). */
.swal2-container {
    z-index: 10500 !important;
}

/* Fix: hover submenu trên menu ngang đôi khi không mở (áp dụng cả cấp 1 và cấp 2+)
   Nguyên nhân: menu.js kiểm tra e.target.classList.contains("menu-toggle") nhưng
   khi cursor đè lên icon / text / badge bên trong <a>, e.target là phần tử con
   (không có class menu-toggle) nên không trigger. pointer-events:none chuyển
   mouseover về <a> cha. Class thật trong _MenuItem.cshtml là .text-truncate (không
   phải .text-wrap như Sneat demo gốc) — bản fix trước đó typo nên cấp 2 vẫn hỏng.
*/
.layout-menu-horizontal .menu-link.menu-toggle > .menu-icon,
.layout-menu-horizontal .menu-link.menu-toggle > .text-truncate,
.layout-menu-horizontal .menu-link.menu-toggle > .badge {
    pointer-events: none;
}
.scroll-to-top {
    position: fixed;
    top: 75%;
    right: 20px;
    color: white;
    background-color: #696cff;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border-color: white;
    border-style: solid;
    border-width: 2px;
    display: none;
    z-index: 1000;
}

.scroll-to-top.show {
    display: block;
}

.bs-stepper:not(.vertical):not(.wizard-icons) .bs-stepper-header {
    gap: 0.1rem !important;
}
.bs-stepper .bs-stepper-header {
    padding: 0.5rem 0.5rem !important;
}

body .flatpickr-calendar.open {
    width: 300px !important;
}

/* === Select2 multiple trong Sneat modal === */
/* Cho phép thẻ <li> xuống dòng */
li.select2-selection__choice {
    white-space: normal !important; /* Cho phép text xuống dòng */
    word-break: break-word !important; /* Ngắt từ nếu quá dài */
    display: inline-flex !important;
    align-items: center;
    max-width: 100% !important;
    line-height: 1.3;
    padding: 0.25rem 0.5rem;
    margin: 0.15rem;
}

/* Loại bỏ con mắt mặc định của Edge */
input::-ms-reveal {
    display: none;
}

/* Tránh Edge thêm clear button */
input::-ms-clear {
    display: none;
}

.highlight-token {
    color: brown;
    font-weight: bold;
    background-color: yellow;
    padding: 2px 3px;
    border-radius: 3px;
}
.dt-column-shhs {
    font-size: 1.275rem !important;
    font-weight: bold !important;
}
.dt-column-width-100 {
    width: 100px !important;
    min-width: 100px !important;
    max-width: 100px !important;
    white-space: normal !important; /* Cho phép xuống dòng */
    word-break: break-word; /* Ngắt từ nếu quá dài */
}
.dt-column-width-150 {
    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;
    white-space: normal !important; /* Cho phép xuống dòng */
    word-break: break-word; /* Ngắt từ nếu quá dài */
}
.dt-column-width-200 {
    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
    white-space: normal !important; /* Cho phép xuống dòng */
    word-break: break-word; /* Ngắt từ nếu quá dài */
}
.dt-column-width-400 {
    width: 400px !important;
    min-width: 400px !important;
    max-width: 400px !important;
    white-space: normal !important; /* Cho phép xuống dòng */
    word-break: break-word; /* Ngắt từ nếu quá dài */
}
/* Bảng danh sách gọn (class "dt-compact" trên <table>): Sneat mặc định padding ô 1.25rem mỗi
   bên (cột đầu 1.5rem) nên giữa 2 cột trống 40px, cột dt-column-width-100 chỉ còn ~60px cho chữ.
   Tiền tố html:not([dir=rtl]) để thắng rule cột đầu/cuối của datatables.bootstrap5.css. Bảng
   header tách riêng khi scrollX giữ nguyên class nên cũng được áp. */
html:not([dir=rtl]) table.dataTable.dt-compact > thead > tr > th,
html:not([dir=rtl]) table.dataTable.dt-compact > tbody > tr > td {
    padding: 0.5rem 0.5rem;
}
html:not([dir=rtl]) table.dataTable.dt-compact > thead > tr > th {
    letter-spacing: normal;
}
/* Chừa chỗ cho mũi tên sắp xếp (đặt tuyệt đối ở right: 10px). */
html:not([dir=rtl]) table.dataTable.dt-compact > thead > tr > th[class*="sorting"]:not(.sorting_disabled) {
    padding-right: 1.5rem;
}
html:not([dir=rtl]) table.dataTable.dt-compact > thead > tr > th:first-child,
html:not([dir=rtl]) table.dataTable.dt-compact > tbody > tr > td:first-child {
    padding-left: 1rem;
}
/* Thanh cuộn ngang phía trên bảng (table-enhance.js topScrollbar). */
.dt-top-scroll {
    overflow-x: auto;
    overflow-y: hidden;
}
.dt-top-scroll-inner {
    height: 1px;
}
/* Highlight row – áp dụng cho cả bảng chính + fixed columns */
table.dataTable tbody tr.bg-warning td {
    background-color: var(--bs-warning, #fff3cd) !important;
}
table.dataTable tbody tr.bg-danger td {
    background-color: var(--bg-danger, red) !important;
}

/* ─── Treaty Edit form — UX cải thiện (Phase T.2.3.3) ─────────────────────── */

/* Sneat theme uppercase col-form-label tiếng Việt khó đọc — bỏ uppercase */
#treatyForm .col-form-label,
#treatyForm .form-label {
    text-transform: none;
}

/* Highlight input có dữ liệu — nền lavender #e7e7ff dịu mắt.
   Class .has-value toggle bởi treaty-utils.js trong checkFormChanges.
   Loại trừ disabled (read-only) và :focus (giữ focus state). */
#treatyForm .form-control.has-value:not(:disabled):not(:focus),
#treatyForm .form-select.has-value:not(:disabled):not(:focus) {
    background-color: #e7e7ff;
}
/* Select2: highlight phần rendered (Sneat ẩn native select bằng position:absolute).
   Khi select có .has-value, đổi nền của .select2-selection liền kề. */
#treatyForm .form-select.has-value + .select2-container .select2-selection,
#treatyForm select.has-value + .select2-container .select2-selection {
    background-color: #e7e7ff;
}

/* BaoCao Edit: lavender lan ra cả disabled fields (audit metadata "Người tạo /
   Ngày tạo / Người sửa / Ngày sửa") — khác với treatyForm. Trên BaoCao chỉ có
   4 disabled fields là audit data luôn có giá trị, lavender đồng nhất với fields
   khác mong muốn về mặt visual. */
#formBaoCaoDUTTQT .form-control.has-value:not(:focus),
#formBaoCaoDUTTQT .form-select.has-value:not(:focus) {
    background-color: #e7e7ff;
    opacity: 1;
    color: inherit;
}
#formBaoCaoDUTTQT .form-select.has-value + .select2-container .select2-selection,
#formBaoCaoDUTTQT select.has-value + .select2-container .select2-selection {
    background-color: #e7e7ff;
}

/* BaoCao Index — bộ lọc tìm kiếm 4 Select2 (Cơ quan đề xuất / Danh nghĩa /
   TT hiệu lực / Trạng thái). Lavender khi có chọn để user thấy điều kiện active. */
#baoCaoFilterRow .form-select.has-value + .select2-container .select2-selection,
#baoCaoFilterRow select.has-value + .select2-container .select2-selection {
    background-color: #e7e7ff;
}

/* Highlight trường vừa thay đổi (chưa lưu) — nền vàng nhẹ ưu tiên hơn .has-value lavender.
   Class .changed toggle bởi treaty-utils.js checkFormChanges khi value khác snapshot ban đầu.
   Sau khi save thành công, .changed bị remove → field về lại trạng thái .has-value (lavender). */
#treatyForm .form-control.changed:not(:disabled):not(:focus),
#treatyForm .form-select.changed:not(:disabled):not(:focus) {
    background-color: #fff8d6;
}
#treatyForm .form-select.changed + .select2-container .select2-selection,
#treatyForm select.changed + .select2-container .select2-selection {
    background-color: #fff8d6;
}

/* BaoCao Edit dirty highlight — yellow ưu tiên hơn lavender. */
#formBaoCaoDUTTQT .form-control.changed:not(:focus),
#formBaoCaoDUTTQT .form-select.changed:not(:focus) {
    background-color: #fff8d6;
}
#formBaoCaoDUTTQT .form-select.changed + .select2-container .select2-selection,
#formBaoCaoDUTTQT select.changed + .select2-container .select2-selection {
    background-color: #fff8d6;
}

/* Phase BC.5: HoSo locked — block mọi tương tác trong form/stepper.
 * Lý do: prop('disabled', true) chỉ disable input gốc, không disable widget overlay
 * (Select2 wrapper, flatpickr, Dropzone) → user vẫn click vào widget sửa được.
 * pointer-events:none chặn ở root, sau đó allow lại cho stepper nav + Unlock button.
 * JS lock add class .hoso-locked vào <body>.
 * Không mờ form (opacity giữ 1) — Sami feedback 2026-05-12 mờ làm khó đọc dữ liệu,
 * banner "Hồ sơ đã khóa" phía trên đã đủ chỉ báo trạng thái. */
body.hoso-locked #treatyForm,
body.hoso-locked #du-stepper .bs-stepper-content {
    pointer-events: none;
}
body.hoso-locked #du-stepper .step-trigger,
body.hoso-locked .lock-bypass,
body.hoso-locked #btnUnlockHoSo,
body.hoso-locked [data-bs-toggle="modal"][data-bs-target*="AuditLog"] {
    pointer-events: auto;
    opacity: 1;
}

/* Lock mode: hb-lock.js / nb-lock.js / ... set disabled=true cho mọi :input, làm
 * rule .has-value (loại :disabled) mất hiệu lực với native input/textarea/flatpickr,
 * trong khi Select2 wrapper vẫn lavender → bất nhất màu giữa các widget.
 * Override: trong lock mode, ép lavender cho mọi .has-value bất kể disabled. */
body.hoso-locked #treatyForm .form-control.has-value,
body.hoso-locked #treatyForm .form-select.has-value {
    background-color: #e7e7ff;
    /* Chrome/Firefox set opacity .5 cho :disabled input — ép lại để màu đồng nhất. */
    opacity: 1;
    color: inherit;
}

/* Sticky footer save bar — chỉ visible khi form dirty (toggle .is-active từ JS) */
.treaty-sticky-footer {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: #fff;
    border-top: 1px solid #e7eaf3;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
    padding: 10px 16px;
    display: none;
    align-items: center;
    gap: 10px;
}
.treaty-sticky-footer.is-active {
    display: flex;
}
.treaty-sticky-footer .footer-status {
    flex: 1;
    color: #846200;
    font-size: 0.875rem;
}
.treaty-sticky-footer .footer-status::before {
    /* \25CF = ● (U+25CF BLACK CIRCLE) — dùng escape ASCII để không lệ thuộc charset
       file CSS (ký tự literal bị mojibake khi CSS phục vụ không kèm charset=utf-8). */
    content: "\25CF";
    color: #f0b400;
    margin-right: 6px;
}

/* Dirty indicator — gạch chân vàng dưới SoHieuHoSo khi form dirty.
   Tránh chiếm khoảng bên phải như chấm dot cũ. Class .is-dirty toggle
   bởi treaty-utils.js cùng lúc với #treatyStickyFooter.is-active.
   Khi dirty: gạch chân nhấp nháy fade in/out. */
.treaty-so-hieu {
    text-decoration: underline transparent;
    text-decoration-thickness: 4px;
    text-underline-offset: 6px;
    transition: text-decoration-color 0.2s ease;
}
.treaty-so-hieu.is-dirty {
    text-decoration-color: #f0b400;
    animation: treaty-dirty-blink 1.4s ease-in-out infinite;
}
@keyframes treaty-dirty-blink {
    0%, 100% { text-decoration-color: #f0b400; }
    50% { text-decoration-color: rgba(240, 180, 0, 0.2); }
}
/* Legacy: chấm dot cũ nếu còn markup chưa cleanup → ẩn để không hiện chấm rỗng */
.treaty-dirty-dot {
    display: none !important;
}

/* Đồng bộ chiều cao nhóm button trong header Edit — button icon-only
   (cart, chuông, Hủy) có height nhỏ hơn button có text (Xem, Lưu) vì
   thiếu line-height. Force min-height + flex center icon. */
#du-stepper, #addToCart, #dropdownCanhBao,
#manualSaveBtn, #manualResetBtnTop {
    line-height: 1.5;
}
#addToCart,
#dropdownCanhBao,
#manualSaveBtn,
#manualResetBtnTop {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Nút "Mở rộng" (icon-only) cạnh input "Khác" — thu hẹp padding ngang để
   không chiếm chỗ của input. Mặc định Bootstrap btn padding ~0.875rem hai
   bên, dư cho icon 16px. Giảm còn 0.825rem + flex shrink để input mở rộng. */
.expand-text-btn, .btn-category-update {
    flex: 0 0 auto;
    padding-left: 0.825rem !important;
    padding-right: 0.825rem !important;
}
.expand-text-btn > .bx, .btn-category-update > .bx {
    font-size: 1rem;
    line-height: 1;
}

/* ──────────────────────────────────────────────────────────────────────
   FIX: input bị co về 0 trong .input-group khi FormValidation popular
   wrap <input> bằng <div class="fv-plugins-icon-container">.

   Root cause: Bootstrap default rule
     .input-group > .form-control { width: 1%; flex: 1 1 auto; min-width: 0; }
   chỉ áp khi `.form-control` là direct child. FV chèn wrapper → input
   không match selector → wrapper không có flex-grow → co về 0.

   Fix: replicate Bootstrap rule trên `.fv-plugins-icon-container` khi nó
   là direct child của `.input-group`. Áp global cho mọi page.
   ────────────────────────────────────────────────────────────────────── */
.input-group > .fv-plugins-icon-container {
    position: relative;
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
}
.input-group > .fv-plugins-icon-container > .form-control,
.input-group > .fv-plugins-icon-container > .form-select {
    width: 100%;
    min-width: 0;
}
.input-group > .fv-plugins-icon-container:first-child > .form-control,
.input-group > .fv-plugins-icon-container:first-child > .form-select {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.input-group > .fv-plugins-icon-container:not(:first-child) > .form-control,
.input-group > .fv-plugins-icon-container:not(:first-child) > .form-select {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* Select2 size sm — bridge với Bootstrap form-select-sm.
   Bootstrap form-select-sm chỉ áp cho native <select>, select2 thay bằng .select2-selection.
   Rule này target select2 sibling của <select.form-select-sm> → match height + font-size. */
select.form-select-sm + .select2-container--bootstrap-5 .select2-selection {
    min-height: calc(1.5em + 0.5rem + 2px);
    padding: 0.125rem 0.375rem;
    font-size: 0.8125rem;
}
select.form-select-sm + .select2-container--bootstrap-5 .select2-selection__rendered,
select.form-select-sm + .select2-container--bootstrap-5 .select2-selection__choice,
select.form-select-sm + .select2-container--bootstrap-5 .select2-search__field,
select.form-select-sm + .select2-container--bootstrap-5 .select2-selection__placeholder {
    font-size: 0.8125rem;
    line-height: 1.4;
}
select.form-select-sm + .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice {
    padding: 0.125rem 0.375rem;
    margin-top: 0.125rem;
}

/* KPI card clickable — Sneat-style hover lift + cursor pointer.
   Áp cho card có class `kpi-card-clickable` (vd KPI "Sắp hết hạn" → AdvancedSearch). */
.kpi-card-clickable {
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    display: block; /* để <a> chiếm full width như card */
}
.kpi-card-clickable:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.3rem 1rem rgba(67, 89, 113, 0.15);
}

/* Placeholder đậm dễ đọc — override cứng mọi rule theme.
   site.css nạp sau core.css/theme-default.css; thêm !important + các selector
   tiền tố trình duyệt để thắng tuyệt đối bất kể theme/lib định nghĩa gì. */
.form-control::placeholder {
    color: #373d42 !important;
    opacity: 1 !important;
}
.form-control::-webkit-input-placeholder {
    color: #373d42 !important;
    opacity: 1 !important;
}

/* Viền control đồng nhất #8592a3.
   Dùng !important để thắng utility .border của Bootstrap (core.css:
   `.border { border: ... !important }`) + mọi rule theme khác — đây là lý do
   trước đó .form-control trong input-group không ăn màu (rule thường bị đè).
   Loại trừ :focus + .is-invalid/.is-valid để GIỮ viền tím khi focus và
   viền đỏ/xanh khi validate (FormValidation). */
.form-control:not(:focus):not(.is-invalid):not(.is-valid),
.form-select:not(:focus):not(.is-invalid):not(.is-valid),
.input-group-text {
    border-color: #8592a3 !important;
}
.select2-container--bootstrap-5 .select2-selection {
    border-color: #8592a3 !important;
}

/* Hover: viền control đậm hơn (#5d6b7d). Cùng cơ chế loại trừ :focus +
   .is-invalid/.is-valid. .input-group:hover bao con để cả ô input + icon
   đậm cùng lúc khi rê chuột vào bất kỳ phần nào của input-group. */
.form-control:hover:not(:focus):not(.is-invalid):not(.is-valid),
.form-select:hover:not(:focus):not(.is-invalid):not(.is-valid),
.input-group:hover .form-control:not(:focus):not(.is-invalid):not(.is-valid),
.input-group:hover .form-select:not(:focus):not(.is-invalid):not(.is-valid),
.input-group:hover .input-group-text,
.input-group-text:hover {
    border-color: #5d6b7d !important;
}
.select2-container--bootstrap-5:hover .select2-selection {
    border-color: #5d6b7d !important;
}

/* .text-muted đậm hơn — đổi #a1acb8 (xám nhạt mặc định Sneat) → #373d42.
   core.css có `.text-muted { color: #a1acb8 !important }` VÀ template-customizer.js
   nạp lại core.css động (appendChild) → core.css đứng SAU site.css trong DOM.
   2 rule cùng specificity + cùng !important → core thắng theo thứ tự nạp.
   Fix: thêm `body` nâng specificity (0,0,1,1) > (0,0,1,0) → thắng bất kể thứ tự. */
body .text-muted {
    color: #373d42 !important;
}

/* Cỡ chữ nhãn form to hơn (mặc định Sneat 0.75rem khá nhỏ) → 0.95rem.
   Thêm `body` nâng specificity để thắng core.css bất kể thứ tự nạp
   (template-customizer.js nạp lại core.css động — xem ghi chú .text-muted). */
body .form-label,
body .col-form-label {
    font-size: 0.95rem;
}

/* Cỡ chữ divider-text → 0.95rem (mặc định Sneat 0.8rem).
   `body` nâng specificity (0,0,2,1) > core (0,0,2,0) — thắng bất kể thứ tự nạp. */
body .divider .divider-text {
    font-size: 0.95rem;
}

/* Màu link: mặc định #292d30, hover #373d42 (thay tím #696cff của Sneat).
   `body a` nâng specificity (0,0,0,2) > core `a` (0,0,0,1) — thắng bất kể thứ tự nạp.
   Vẫn nhường .menu-link/.btn/.nav-link/.dropdown-item/.page-link... (1 class >
   2 element) nên chỉ áp cho link nội dung thường. */
body a {
    color: #292d30;
}
body a:hover {
    color: #373d42;
}

/* .btn-outline-secondary: viền + chữ đen thay xám #8592a3 (trạng thái thường).
   `body` nâng specificity thắng core bất kể thứ tự nạp. Rule :hover/:focus của
   core có specificity cao hơn → trạng thái hover (nền xám đậm) vẫn giữ nguyên. */
body .btn-outline-secondary {
    color: #000000;
    border-color: #000000;
}

/* FIX placeholder Select2 multiple không hiện.
   Select2 multiple đặt placeholder vào thuộc tính `placeholder` của ô <input>
   search. Hàm resizeSearch() của Select2 chạy lúc step (nạp AJAX) chưa layout
   xong → tính width = 0 → gán inline `style="width:0px"` cho input → placeholder
   không có chỗ hiện. Khi select đang RỖNG (chưa có tag .select2-selection__choice)
   ép ô search rộng đủ; !important để thắng inline style. Có tag rồi thì :has()
   không khớp → trả Select2 tự co giãn ô search như bình thường. */
.select2-container--bootstrap-5 .select2-selection__rendered:not(:has(.select2-selection__choice)) .select2-search--inline {
    width: 100%;
}
.select2-container--bootstrap-5 .select2-selection__rendered:not(:has(.select2-selection__choice)) .select2-search__field {
    width: 100% !important;
}

/* Placeholder select2 multiple hiện qua ô <input> search → màu của nó là
   ::placeholder của .select2-search__field (theme để #b4bdc6 nhạt). Đổi sang
   #373d42 cho ĐỒNG MÀU với placeholder select2 đơn (.select2-selection__placeholder).
   !important để thắng rule theme.
   QUAN TRỌNG: phải tách RULE RIÊNG cho mỗi pseudo — nếu gộp ::-moz-placeholder /
   :-ms-input-placeholder chung dấu phẩy thì Edge/Chrome coi cả nhóm là invalid
   và bỏ luôn rule. */
.select2-container--bootstrap-5 .select2-search__field::placeholder {
    color: #373d42 !important;
    opacity: 1 !important;
}
.select2-container--bootstrap-5 .select2-search__field::-webkit-input-placeholder {
    color: #373d42 !important;
    opacity: 1 !important;
}

/* toastr chạy escapeHtml=true (security audit JS 2026-09-30 §2.6) → xuống dòng bằng "\n", không bằng <br>. */
#toast-container .toast-message {
    white-space: pre-line;
}

/* Khung nhóm trường trong form nhập liệu: <fieldset class="nhom-truong"><legend class="visually-hidden">Tên nhóm</legend>…</fieldset>
 * (Sami 2026-10-03: ẩn tên khung trên màn hình — nhìn rối; legend vẫn giữ cho trình đọc màn hình).
 * Dùng ở mục "5. Căn cứ chấm dứt hiệu lực" (bước Hiệu lực hai bên / nhiều bên) — Sami chốt 2026-10-03.
 * Reboot của Bootstrap đặt legend float:left + width:100% → trả về để tên nhóm nằm trên viền khung. */
fieldset.nhom-truong {
    border: 1px solid var(--bs-border-color, #d9dee3);
    border-radius: .5rem;
    padding: 1rem 1rem 0; /* legend ẩn (visually-hidden) → đệm trên đủ cho hàng đầu */
    margin-bottom: 1rem;
}
fieldset.nhom-truong > legend {
    float: none;
    width: auto;
    padding: 0 .5rem;
    margin-bottom: .25rem;
    font-size: .9375rem;
    font-weight: 600;
    color: var(--bs-heading-color, #566a7f);
}

/* Modal mở để SỬA: khung ẩn tới khi AJAX nạp dữ liệu xong rồi mờ dần hiện (treaty-utils.js — .modal-cho-du-lieu),
 * tránh khung trượt vào rỗng rồi giãn chiều cao. Giữ nguyên transition transform của Bootstrap. */
.modal.fade .modal-dialog { /* cùng độ ưu tiên với rule của Bootstrap, nạp sau → thắng */
    transition: transform .3s ease-out, opacity .15s linear;
}
.modal.modal-cho-du-lieu .modal-dialog {
    opacity: 0;
}

/* Sami 2026-10-03: core.css (Sneat) chỉ có rule tô ĐỎ khung select2 khi <select> ẩn lỗi (select.is-invalid ~ .select2),
 * thiếu rule XANH khi hợp lệ → chọn xong ô select2 về viền thường, lệch với ô chữ / ô ngày (viền xanh). Cùng màu
 * với .form-control.is-valid. Áp mọi form có FormValidation (modal danh mục, modal hồ sơ, form các bước). */
form select.is-valid ~ .select2 .select2-selection {
    border-color: var(--bs-form-valid-color) !important;
}

/* 2026-10-03: nút "Xóa" ở chân mọi lịch flatpickr (js/flatpickr-clear.js). */
.flatpickr-calendar .flatpickr-clear-footer {
    display: flex;
    justify-content: flex-end;
    padding: 0.375rem 0.5rem;
    border-top: 1px solid var(--bs-border-color);
}