@charset "UTF-8";
/* =============================================================
* Tinh chỉnh giao diện tour hướng dẫn sử dụng (intro.js).
* Chỉ áp cho tooltip của tour này qua lớp .sso-guide-tooltip
* (khai báo ở tuỳ chọn tooltipClass trong share/renew/js/user-guide.js),
* không đụng tới introjs.css gốc.
*
* Không cần bản riêng cho chế độ tối: chú thích của intro.js nằm trên
* lớp phủ đen nên chữ trắng đọc được ở cả hai chế độ.
* ============================================================= */
/* introjs.css của bộ giao diện này để tiêu đề 30px - vừa với tiếng Anh
ngắn gọn nhưng tràn dòng với tên menu tiếng Việt dài.
Nền: introjs.css để .introjs-tooltip trong suốt (chỉ có chữ trắng), tính rằng
phía sau luôn là lớp phủ đen. Giả định đó không đúng với hệ thống này - header
và sidebar được nâng lên TRÊN lớp phủ ở cuối file nên vẫn sáng nguyên, chữ
trắng đặt lên là mất hút. Cho tooltip một mặt nền riêng để đọc được bất kể
phía sau là gì. Không cần lo mũi tên chỉ hướng lệch màu: introjs.css đã
display:none !important cho .introjs-arrow. */
.introjs-tooltip.sso-guide-tooltip {
min-width: 260px;
max-width: min(420px, calc(100vw - 40px));
padding: 16px;
font-size: 20px;
line-height: 1.35;
background-color: rgba(17, 24, 39, .96);
border-radius: 8px;
box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
}
.introjs-tooltip.sso-guide-tooltip .content {
margin-top: 10px;
font-size: 14px;
line-height: 1.5;
color: rgba(255, 255, 255, .85);
}
/* Nút điều hướng theo màu thương hiệu thay cho màu xanh mặc định của thư viện.
Phải khai báo cả color: ở chế độ tối dark-mode.css có rule đổi màu chữ cho mọi
thẻ , mà nút của intro.js chính là thẻ nên sẽ bị nhuộm theo nếu bỏ trống. */
.sso-guide-tooltip .introjs-prevbutton,
.sso-guide-tooltip .introjs-nextbutton {
color: #fff;
background-color: var(--brand-primary, #B9000E);
}
.sso-guide-tooltip .introjs-prevbutton:hover,
.sso-guide-tooltip .introjs-nextbutton:hover,
.sso-guide-tooltip .introjs-prevbutton:focus,
.sso-guide-tooltip .introjs-nextbutton:focus {
color: #fff;
background-color: var(--brand-primary-hover, #DC2626);
}
.sso-guide-tooltip .introjs-progressbar {
background-color: var(--brand-primary, #B9000E);
}
.sso-guide-tooltip .introjs-progress {
background-color: rgba(255, 255, 255, .25);
}
/* Nút thoát là một chấm tròn GẮN VÀO góc trên bên phải của popup hướng dẫn: nhô
ra ngoài mép popup chứ không nằm trong phần tiêu đề, nhờ vậy nội dung không
phải chừa chỗ và nút cũng không lẫn với hàng nút điều hướng bên dưới.
introjs.css mặc định vẽ nút này thành nút tròn 56px position: fixed thả nổi ở
góc dưới phải MÀN HÌNH - tách rời popup nên không đọc ra được là nút thoát của
tour đang chạy, lại còn đè lên nội dung trang ở góc đó.
.introjs-tooltip vốn đã position: absolute nên chỉ cần neo tuyệt đối theo
chính popup; phải ghi đè cả left/bottom vì bản gốc dùng fixed + right/bottom.
Nền lấy đúng màu popup (xem .introjs-tooltip.sso-guide-tooltip ở đầu file),
thêm viền sáng mảnh để chấm tròn tách khỏi nền trang phía sau. */
.sso-guide-tooltip .introjs-skipbutton {
position: absolute;
top: -12px;
right: -12px;
left: auto;
bottom: auto;
width: 28px;
height: 28px;
padding: 0;
margin: 0;
font-size: 13px;
line-height: 26px;
/* introjs.css khai báo text-decoration: none cho .introjs-prevbutton và
.introjs-nextbutton nhưng bỏ sót .introjs-skipbutton. intro.js dựng nút
bằng thẻ không href nhưng CÓ tabindex (_setAnchorAsButton trong
intro.js), nên reset a:not([href]):not([tabindex]) của bootstrap-reboot
không với tới, để lọt rule a:hover { text-decoration: underline }. Các
bước giữa nút chỉ có biểu tượng nên không nhận ra, tới bước cuối nút mang
chữ "Hoàn tất" thì gạch chân hiện rõ. Selector này (0,2,0) đã thắng
a:hover (0,1,1) nên không cần khai lại ở từng trạng thái. */
text-decoration: none;
background: rgba(17, 24, 39, .96) !important;
border: 1px solid rgba(255, 255, 255, .35);
border-radius: 50%;
box-shadow: 0 4px 10px rgba(0, 0, 0, .45);
}
/* introjs.css để line-height 56px cho biểu tượng, khớp với nút tròn 56px cũ. */
.sso-guide-tooltip .introjs-skipbutton i {
line-height: 26px;
}
.sso-guide-tooltip .introjs-skipbutton:hover,
.sso-guide-tooltip .introjs-skipbutton:focus,
.sso-guide-tooltip .introjs-skipbutton:active {
background: var(--brand-primary-hover, #DC2626) !important;
border-color: var(--brand-primary-hover, #DC2626);
}
/* intro.js dựng các nút bằng thẻ không có href nên trình duyệt không tự
cho con trỏ bàn tay. renew/layout.jsp cũng không có rule a { cursor: pointer }
như share/css/layout.css của adminLayout, nên phải khai báo ở đây. */
.introjs-button,
.introjs-skipbutton,
.introjs-prevbutton,
.introjs-nextbutton,
.dropdown-item.user-guide-item {
cursor: pointer;
}
/* Bước cuối: intro.js dùng lại chính nút Bỏ qua, thay nội dung bằng doneLabel và
gắn thêm .introjs-donebutton. Chấm tròn ở góc popup không phải chỗ đặt hành
động kết thúc, nên ở bước này trả nút về đúng hàng nút bên dưới (nó vốn đã là
con của .introjs-tooltipbuttons), dáng viên thuốc như Quay lại / Tiếp theo
nhưng màu xanh để phân biệt kết thúc với bỏ ngang. */
.sso-guide-tooltip .introjs-skipbutton.introjs-donebutton,
.sso-guide-tooltip .introjs-skipbutton.introjs-donebutton:active,
.sso-guide-tooltip .introjs-skipbutton.introjs-donebutton:focus {
position: static;
width: auto;
height: auto;
padding: 8px 18px;
font-size: 14px;
line-height: 1.42857143;
background: var(--color-success-600, #16A34A) !important;
border: 1px solid transparent;
border-radius: 1000px;
box-shadow: none;
}
.sso-guide-tooltip .introjs-skipbutton.introjs-donebutton:hover {
background: var(--color-success-500, #22C55E) !important;
border-color: transparent;
}
/* Bước cuối, intro.js để "Tiếp theo" ở trạng thái introjs-disabled - một nút chết
nằm ngay cạnh "Hoàn tất". Ẩn hẳn đi cho hàng nút chỉ còn Quay lại / Hoàn tất.
Chỉ ẩn nút NEXT: ở bước đầu tiên chính nút "Quay lại" mới mang lớp disabled,
nút đó vẫn phải thấy để biết mình đang ở đầu tour. */
.sso-guide-tooltip .introjs-nextbutton.introjs-disabled {
display: none;
}
/* Nhãn chữ của nút Bỏ qua: chỉ dành cho trình đọc màn hình, không tự định nghĩa
dựa vào .sr-only vì Bootstrap 5 đã bỏ lớp này. */
.sso-guide-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* -------------------------------------------------------------
* Header và sidebar trong lúc chạy tour
*
* Để phần tử đang chỉ dẫn nổi lên trên lớp phủ, intro.js đặt z-index 10100 cho
* nó rồi gắn lớp .introjs-fixParent lên mọi phần tử cha có z-index để phá ngữ
* cảnh xếp chồng (ép position: absolute + z-index: auto). Header và sidebar của
* hệ thống đều là position: fixed nên thủ thuật này làm hỏng bố cục, nặng nhất
* là ở adminLayout: sidebar biến mất khỏi màn hình.
*
* Ở đây không dựa vào thủ thuật đó nữa mà nâng thẳng cả header lẫn sidebar lên
* trên lớp phủ (z-index 10000) trong lúc chạy tour, đồng thời user-guide.js gỡ
* lớp .introjs-fixParent ngay sau mỗi bước. Hai khối này giữ nguyên
* position: fixed nên bố cục không đổi, và không còn phụ thuộc vào việc phần tử
* con có thoát được ngữ cảnh xếp chồng hay không.
* ------------------------------------------------------------- */
body.sso-guide-running header.fixed-header,
body.sso-guide-running nav.site-navbar,
body.sso-guide-running sidebar {
position: fixed !important;
z-index: 10050 !important;
/* Hai khối này nằm trên lớp phủ nên vẫn bấm được; khoá lại để không ai
bấm nhầm sang menu khác giữa chừng làm đứt tour. */
pointer-events: none;
}
/* Hệ quả của việc nâng lên trên lớp phủ: header và sidebar giữ nguyên độ sáng
trong khi cả trang đã tối đi, nhìn chói và làm nền cho tooltip trở nên khó
đọc. Phủ thêm một lớp tối ngay bên trong hai khối này cho đồng mức với lớp
phủ của intro.js (opacity mặc định 0.8).
z-index 9999: đủ cao để trùm mọi phần tử con của header/sidebar (đều dùng
thang z-index nhỏ), nhưng vẫn thấp hơn 10100 mà introjs.css đặt cho
.introjs-showElement - nhờ vậy đúng phần tử đang được chỉ dẫn vẫn sáng rõ
trong khi phần còn lại chìm xuống. */
body.sso-guide-running header.fixed-header::after,
body.sso-guide-running nav.site-navbar::after,
body.sso-guide-running sidebar::after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9999;
background-color: rgba(0, 0, 0, .8);
pointer-events: none;
}
/* Popup phải luôn bấm được, kể cả khi nó nằm đè lên chính phần tử đang chỉ dẫn.
Tuỳ chọn disableInteraction: true (xem user-guide.js) khiến intro.js sinh ra
.introjs-disableInteraction - một lớp trong suốt phủ đúng vùng phần tử đang
chỉ dẫn để chặn bấm xuyên qua lớp phủ. introjs.css cho lớp chặn đó
z-index: 10300 !important, trong khi khung chứa popup
(.introjs-tooltipReferenceLayer, chính là cha của .introjs-tooltip) chỉ có
10101. Hai lớp là anh em cùng nằm trong body nên hễ popup che lên phần tử là
lớp chặn nằm trên và nuốt hết cú bấm: gặp rõ nhất ở bước cuối chỉ vào bảng kết
quả cao gần hết màn hình - cuộn lên đầu trang thì popup ra khỏi vùng bảng nên
bấm được, cuộn xuống thì popup rơi vào giữa bảng và Quay lại / Hoàn tất thành
nút chết.
Nâng khung popup lên trên cả lớp chặn lẫn chấm số bước (10400). Chấm số nằm
BÊN TRONG khung này nên thứ tự giữa hai thứ đó không đổi. */
.introjs-tooltipReferenceLayer {
z-index: 10500;
}
/* Mặc định helperLayer có nền xanh đặc (#3e8ef7) - đặt lên trên phần tử đang
chỉ dẫn là che mất nội dung. Đổi thành viền sáng bao quanh. */
.introjs-helperLayer {
background-color: transparent;
border: none;
border-radius: 6px;
box-shadow: 0 0 0 2px var(--brand-primary-hover, #DC2626);
}
/* Số thứ tự bước: introjs.css neo chấm số ở góc trên bên TRÁI phần tử đang chỉ
dẫn (top/left -16px). Các mục sidebar nằm sát mép trái màn hình nên chấm số bị
cắt mất một nửa ra ngoài khung nhìn. Chuyển sang góc trên bên PHẢI - phía đó
luôn còn chỗ, kể cả với mục menu chiếm hết chiều ngang sidebar.
Nhô ra 8px thay vì 16px để không chạm popup của những bước đặt bên phải:
_placeTooltip() chừa đúng 20px kể từ mép phải phần tử (xem case 'right').
Chỉ đổi vị trí, giữ nguyên kích thước và z-index của bản gốc. */
.introjs-helperNumberLayer {
top: -8px;
right: -8px;
left: auto;
}
@media (max-width: 768px) {
.introjs-tooltip.sso-guide-tooltip {
min-width: 0;
font-size: 18px;
}
}