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;
}
/* ============================================================
pq-tree — Cây phân quyền (màn /Admin/PhanQuyenCay/Cay)
Namespace riêng .pq-* — KHÔNG đụng file theme smartadminNew.
============================================================ */
.pq-tree { border: 1px solid rgba(0,0,0,.12); border-radius: .35rem; padding: .5rem; max-height: 62vh; overflow: auto; }
.pq-node.pq-an { display: none; }
.pq-row { display: flex; align-items: center; gap: .4rem; padding: 2px 4px; border-radius: .25rem; }
.pq-row:hover { background: rgba(0,0,0,.045); }
.pq-toggle { cursor: pointer; width: 16px; display: inline-block; text-align: center; user-select: none; opacity: .7; }
.pq-toggle-empty { width: 16px; display: inline-block; }
.pq-ten { display: flex; align-items: center; gap: .35rem; margin: 0; cursor: pointer; flex: 1 1 auto; min-width: 0; }
.pq-ten > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pq-badge { font-size: 10px; }
.pq-actions { display: flex; gap: .55rem; flex: 0 0 auto; }
.pq-act { display: flex; align-items: center; gap: .2rem; margin: 0; font-size: 12px; cursor: pointer; white-space: nowrap; }
.pq-act-locked { opacity: .55; cursor: not-allowed; }
/* Thừa hưởng từ nhóm: mờ nhẹ để phân biệt với cấp thẳng, nhưng VẪN bấm được
(bỏ tick = chặn riêng đối tượng đó). */
.pq-act-ke { opacity: .72; }
/* Đang bị chặn riêng — gạch ngang + đỏ để nhìn là biết đây không phải "chưa cấp". */
.pq-act-chan { opacity: 1; color: #d9534f; text-decoration: line-through; }
.pq-nguon { font-size: 10px; color: #888; }
.pq-children.pq-hidden { display: none; }
.pq-node.pq-khop > .pq-row { background: rgba(255, 193, 7, .22); }
@media (max-width: 767.98px) {
.pq-row { flex-wrap: wrap; }
.pq-actions { width: 100%; padding-left: 22px; flex-wrap: wrap; }
}
/* ===================== nlpjax — điều hướng không tải lại trang ===================== */
/* Chỉ báo "đang tải" khi chuyển màn bằng PJAX. Không có nó thì click sidebar xong
màn hình đứng im vài trăm ms, người dùng tưởng bấm hụt và bấm lại. */
body.nlpjax-dangtai .main-content {
opacity: .55;
transition: opacity .12s linear;
pointer-events: none; /* chặn bấm chồng khi đang tải */
}
body.nlpjax-dangtai::after {
content: "";
position: fixed;
top: 0; left: 0;
height: 3px;
width: 100%;
z-index: 2000;
background: linear-gradient(90deg, #198754 0%, #34d399 50%, #198754 100%);
background-size: 40% 100%;
background-repeat: no-repeat;
animation: nlpjax-chay 900ms ease-in-out infinite;
}
@keyframes nlpjax-chay {
0% { background-position: -40% 0; }
100% { background-position: 140% 0; }
}