căn TRÁI; 512 view mới dùng
`.d-flex.justify-content-end` (nút PHẢI) + 6 view `.modal-footer` (mặc định
flex-end). Kéo 2 nhóm phải về trái cho nhất quán — an toàn vì trong modal,
`.justify-content-end` CHỈ dùng cho hàng nút (đã verify: mọi chỗ là
`
` bọc nút submit/dismiss). */
#myModal .modal-footer,
#myModal .justify-content-end { justify-content: flex-start !important; }
/* ============================================================================
LƯỚI AN TOÀN RESPONSIVE BẢNG (mobile) — 2026-07-18
Chuẩn dự án: MỌI bảng phải bọc `
` (theme-guide
dòng 162-166). Bảng `.dt-basic-example` do DataTables (responsive:true) tự lo.
Rule này là LƯỚI AN TOÀN cho bảng `.table` KHÔNG phải DataTable mà LỠ quên bọc
.table-responsive: trên điện thoại cho cuộn ngang thay vì phá vỡ layout trang.
- `:not(.dataTable)` bỏ qua bảng DataTables đã init (theme tự thêm class này).
- Rule reset trả bảng ĐÃ bọc .table-responsive về display:table (div cha đã lo
cuộn) => KHÔNG đổi hành vi 204 bảng đã bọc đúng chuẩn. KHÔNG sửa file theme.
============================================================================ */
@media (max-width: 991.98px) {
.app-content table.table:not(.dataTable) {
display: block;
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.app-content .table-responsive > table.table:not(.dataTable) {
display: table;
}
}
/* ============================================================================
HEADER + SIDEBAR CỐ ĐỊNH (fixed) khi cuộn — user yêu cầu 2026-07-19
`` 3 layout area gắn `set-header-fixed set-nav-fixed` → theme cho sidebar
position:fixed + overflow-y:auto (đứng yên, cuộn menu riêng khi dài) + header fixed.
Header của theme fixed đúng ở TF nhưng ở Admin/KhachSan lại ra `static` (cùng markup
.app-header, KHÔNG file CSS nào override — nguyên nhân chưa rõ). site.css nạp CUỐI ở
cả 3 layout nên rule dưới ép header cố định ĐỒNG NHẤT (header+sidebar cùng đứng yên,
nội dung cuộn ở giữa = mẫu admin dashboard chuẩn). KHÔNG sửa file theme.
Chỉ áp desktop (≥992px); mobile sidebar là off-canvas riêng, không đụng.
============================================================================ */
@media (min-width: 992px) {
.set-header-fixed .app-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1035;
}
}
/* ============================================================================
HỘP THƯ (HopThu) — khôi phục chuỗi chiều cao khi .layout-trimmed bị LỒNG
trong lớp bọc .main-content của layout (vá 2026-07-19).
Layout bọc @RenderBody() trong .main-content (bắt buộc — DOM contract của
smartApp.js, vá 2026-07-16). Nhưng HopThu.cshtml là trang DUY NHẤT dùng mẫu
"trimmed layout" của theme: tự mang .main-content.layout-trimmed và theme
yêu cầu nó là CON TRỰC TIẾP của .content-wrapper:
- .app-content .content-wrapper .main-content { flex:1 1 auto } chỉ có tác
dụng khi cha là flex — lớp bọc là block ⇒ flex vô hiệu ⇒ vùng danh sách
thư (flex-grow-1 > position-absolute + overflow-y-auto) cao 0px, thư bị
cắt cụt dù server render đủ.
- .content-wrapper:has(>.layout-trimmed){padding:0} không còn khớp ⇒ viền
trắng thừa quanh khung thư.
2 rule dưới vá cả 2 (đo thật headless 1280×800: vùng thư 0px → ~519px).
============================================================================ */
.content-wrapper > .main-content:has(> .layout-trimmed) {
display: flex;
flex-direction: column;
}
.content-wrapper:has(.layout-trimmed) {
padding: 0 !important;
}