/* =====================================================================================
 * Thanh đầu trang kiểu app — theo ảnh mẫu chủ dự án gửi 16/09/2026.
 *   ☰ · ‹ quay lại · [icon] tên màn + phụ đề  ……  cảnh báo · chuông │ ảnh · ⋮
 *   Menu của ⋮: người dùng · Quét QR · Chế độ sáng/tối.
 *
 * ⚠ CHỈ nạp cho aiwater.xiris.vn (rào ở theme.php, biến $pwa_bat). Thư mục themes/theme_xiris
 *   dùng chung 6 site — tuyệt đối không mang mấy luật này vào custom.css/style.css.
 *
 * ⚠ PHẢI ĐÈ ĐƯỢC `xiris_switcher_project_perms.js`: tệp đó bơm <style id="xiris-hdr-style">
 *   vào <head> LÚC CHẠY, tức đứng SAU thẻ <link> của tệp này. Cùng độ ưu tiên thì nó thắng.
 *   Nên mọi luật ở đây đều neo thêm `body ` cho đủ mạnh, KHÔNG phải rải !important khắp nơi:
 *     .dong_mo_menu              (0,1,0) < body .dong_mo_menu                        (0,1,1)
 *     .dong_mo_menu i            (0,1,1) < body .dong_mo_menu i                      (0,1,2)
 *     .dong_mo_menu>i.fa-bars    (0,2,1) < body .dong_mo_menu>i.fa-bars              (0,2,2)
 *     #xiris-qr-btn              (1,0,0) < .xr-hdr-menu #xiris-qr-btn                (1,1,0)
 *     #xiris-hdr-right .btn_noti (1,1,1) < body .dong_mo_menu #… .btn_noti           (1,2,1)
 *
 * ⚠⚠ NEO VÀO `body`, TUYỆT ĐỐI KHÔNG neo vào một lớp do JS gắn.
 *   Bản đầu neo vào `.xr-hdr` (hdr.js gắn lúc DOMContentLoaded) → thanh vẽ ra BỘ MẶT CŨ trước,
 *   vài nhịp sau mới lật sang bộ mặt mới. Chủ dự án thấy đúng như hai thanh header nối nhau:
 *   *"sửa cho mượt mà ko bị hiện 2 header rất khó chịu"* (16/09/2026). `body` thì có sẵn ngay
 *   từ nhịp vẽ đầu tiên nên không còn khoảng lật.
 *
 * ⚠ GIỮ NGUYÊN CHIỀU CAO 56px. `xiris_form.css` ghim `.content_main{height:calc(100dvh - 57px)}`
 *   (56 + 1 viền). Đổi chiều cao thanh là khung nội dung lệch, trang ngoài trượt được rồi header
 *   trôi mất — đúng lỗi đã chữa hồi tháng 8. Bỏ viền dưới thì bù lại bằng 1px trong suốt.
 * ===================================================================================== */

/* ---------- Thanh ----------
   Màu ĐO TỪ CHÍNH LOGO `uploads/logo_*.png` chứ không chọn theo cảm tính (chủ dự án:
   "màu của header dùng đúng màu của logo"). Lọc điểm ảnh đục, tách hai họ màu:
     xanh  — trung bình #2768ae, lõi (30% điểm đậm nhất) #205fa0   <- dùng cho thanh
     cam   — #ff6600 (chính xác)                                    <- chỉ để nhấn, không làm nền
   Dải chuyển từ sắc trung bình xuống sắc lõi, nên cả hai đầu đều là màu thật của logo. */
body .dong_mo_menu {
    background: linear-gradient(180deg, #2768ae 0%, #205fa0 100%);
    color: #fff;
    /* ⚠⚠ CHIỀU CAO VÀ CANH GIỮA PHẢI KHAI Ở ĐÂY, ĐỪNG TRÔNG VÀO JS.
       `min-height:56px` và `align-items:center` vốn nằm trong khối CSS mà switcher bơm vào LÚC
       CHẠY. Mà ngay dưới đây tôi đặt `padding: 0 10px`, tức ghi đè mất `padding-bottom:10px` của
       style.css — thứ duy nhất tạo chiều cao cho thanh khi JS chưa chạy. Hệ quả: 1-2 giây đầu
       thanh co lại còn bằng nút, các nút bị CẮT CỤT nửa trên (chủ dự án gửi ảnh 16/09/2026:
       "màn hình này sao nó lỗi giao diện nè"). Khai thẳng ở đây thì thanh đúng cao ngay từ nhịp
       vẽ đầu tiên, không cần JS.
       ⚠ 56px là con số BẮT BUỘC: xiris_form.css ghim `.content_main{height:calc(100dvh - 57px)}`
         (56 + 1 viền). Đổi là khung nội dung lệch, header trôi mất — lỗi đã chữa hồi tháng 8. */
    min-height: 56px;
    align-items: center;
    border-bottom: 1px solid rgba(15, 23, 42, .12);   /* giữ đúng 57px tổng, xem ghi chú đầu tệp */
    box-shadow: 0 2px 10px rgba(15, 23, 42, .18);
    padding: 0 10px;
    gap: 8px;
}
/* style.css:4836 có `.dong_mo_menu i{font-size:30px}` viết cho ☰ nhưng vơ luôn MỌI <i> trong
   thanh; switcher lại ghim `.dong_mo_menu i{color:#334155}` cho nền trắng. Trả hết về màu thanh. */
body .dong_mo_menu i { color: inherit; }

/* ---------- Ô bấm chung: ☰, ‹, chuông, cảnh báo, ⋮ ----------
   Mẫu vẽ mọi nút thành ô mờ bo tròn trên nền xanh. Gom một chỗ để sau này đổi một lần. */
body .dong_mo_menu > i.fa-bars,
body .dong_mo_menu > i.fa-light,
body .dong_mo_menu .xr-quay-lai,
body .dong_mo_menu #xiris-cb-btn,
body .dong_mo_menu #xiris-hdr-right .btn_noti,
body .dong_mo_menu .xr-hdr-3c {
    flex: 0 0 auto;
    width: 38px; height: 38px;
    min-width: 38px;
    padding: 0;
    display: flex; align-items: center; justify-content: center;
    border: 0; border-radius: 11px;
    background: rgba(255, 255, 255, .15);
    color: #fff;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background .15s;
}
body .dong_mo_menu > i.fa-bars:hover,
body .dong_mo_menu > i.fa-light:hover,
body .dong_mo_menu .xr-quay-lai:hover,
body .dong_mo_menu .xr-quay-lai:active,
body .dong_mo_menu #xiris-cb-btn:hover,
body .dong_mo_menu #xiris-hdr-right .btn_noti:hover,
body .dong_mo_menu .xr-hdr-3c:hover,
body .dong_mo_menu .xr-hdr-3c.mo {
    background: rgba(255, 255, 255, .28);
    color: #fff;
}
/* ⚠ Luật gộp ở trên có `display:flex` — nó VÔ TÌNH bật nút quay lại lên trong trình duyệt
   thường (đo được 16/09/2026: nút hiện ở màn 375px dù không ở chế độ app), phá đúng luật
   "chỉ hiện khi mở dạng app" của pwa/app.css. Khai lại rõ ràng ngay sau đó:
   ẩn mặc định, chỉ mở khi `display-mode: standalone`. */
body .dong_mo_menu .xr-quay-lai { display: none; }
@media all and (display-mode: standalone) {
    body .dong_mo_menu .xr-quay-lai { display: flex; }
}
body .dong_mo_menu > i.fa-bars { font-size: 21px; }
body .dong_mo_menu #xiris-cb-btn i,
body .dong_mo_menu #xiris-hdr-right .btn_noti i { font-size: 17px; }
body .dong_mo_menu .xr-quay-lai svg { width: 21px; height: 21px; }

/* ---------- Khối tên màn ---------- */
body .dong_mo_menu .xr-hdr-tit {
    flex: 1 1 auto;
    min-width: 0;
    display: flex; align-items: center; gap: 9px;
    margin-left: 2px;
}
body .dong_mo_menu .xr-hdr-ico {
    flex: 0 0 auto;
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 11px;
    background: rgba(255, 255, 255, .18);
}
body .dong_mo_menu .xr-hdr-ico i { font-size: 18px; color: #fff; }
body .dong_mo_menu .xr-hdr-tx { min-width: 0; line-height: 1.22; }
body .dong_mo_menu .xr-hdr-tx b {
    display: block;
    font-size: 15.5px; font-weight: 700; color: #fff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Phụ đề: dùng thẻ <i> nhưng KHÔNG nghiêng — theme dành <i> cho icon nên khai rõ cho chắc. */
body .dong_mo_menu .xr-hdr-tx i {
    display: block;
    font-style: normal;
    font-size: 11.5px; color: rgba(255, 255, 255, .78);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Chưa đọc được tên màn thì giấu hẳn khối, đừng để ô icon rỗng lửng lơ. */
body .dong_mo_menu .xr-hdr-tit.trong { display: none; }

/* ---------- Cụm phải ---------- */
body .dong_mo_menu #xiris-hdr-right { gap: 8px; }
body .dong_mo_menu #xiris-hdr-right i { color: #fff; }
/* Huy hiệu số trên chuông và trên dấu ! — mẫu là chấm đỏ nổi trên nền xanh, nên cần viền cùng
   màu thanh để tách khỏi icon. */
body .dong_mo_menu #xiris-hdr-right .so_luong_thong_bao,
body .dong_mo_menu #xiris-cb-badge {
    top: -3px; right: -3px; left: auto;
    min-width: 17px; height: 17px;
    padding: 0 4px;
    border: 2px solid #205fa0; border-radius: 999px;
    background: #ef4444; color: #fff;
    font-size: 10.5px; font-weight: 700; line-height: 13px;
    text-align: center;
}
/* Vạch ngăn trước ảnh đại diện, đúng như mẫu. */
body .dong_mo_menu .xr-hdr-vach {
    flex: 0 0 auto;
    width: 1px; height: 22px;
    margin: 0 1px;
    background: rgba(255, 255, 255, .3);
}
/* Ảnh đại diện + chấm xanh "đang trực tuyến". */
body .dong_mo_menu .xr-hdr-anh {
    position: relative;
    flex: 0 0 auto;
    width: 36px; height: 36px;
    display: block;
    border-radius: 50%;
}
body .dong_mo_menu .xr-hdr-anh img {
    width: 36px; height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, .6);
    background: #e6f4f1;
}
body .dong_mo_menu .xr-hdr-anh::after {
    content: "";
    position: absolute; right: -1px; bottom: -1px;
    width: 11px; height: 11px;
    border-radius: 50%;
    background: #22c55e;
    border: 2px solid #205fa0;
}
body .dong_mo_menu .xr-hdr-3c i { font-size: 18px; }
/* Chip người dùng, nút Quét QR và nút chế độ sáng/tối đã dọn vào menu ⋮ — xem hdr.js.
   Giấu NGAY TỪ ĐẦU (không đợi JS) để chúng không loé lên trên thanh rồi mới biến mất. */
body .dong_mo_menu #xiris-user,
body .dong_mo_menu #xiris-theme,
body .dong_mo_menu #xiris-qr-btn { display: none; }
/* Lưới an toàn: hdr.js chờ quá hạn mà vẫn không dựng được menu ⋮ thì nó gắn `.xr-hdr-hong`,
   trả hai thứ trên về thanh — thà xấu còn hơn mất hẳn đường đổi sáng/tối. */
body .dong_mo_menu.xr-hdr-hong #xiris-user,
body .dong_mo_menu.xr-hdr-hong #xiris-theme,
body .dong_mo_menu.xr-hdr-hong #xiris-qr-btn { display: inline-flex; }

/* ---------- Hiện ra cho mượt ----------
   Cụm phải do switcher dựng, khối tên do hdr.js dựng — cả hai xuất hiện sau khi trang đã vẽ.
   Cho chúng mờ dần vào thay vì bật ra đột ngột. Dùng `animation` chứ KHÔNG dùng `transition`
   + lớp: animation chạy đúng một lần lúc phần tử được chèn, và nếu JS chết thì phần tử không
   tồn tại nên không có nguy cơ nằm im ở trạng thái trong suốt. */
@keyframes xr-hdr-hien { from { opacity: 0; } to { opacity: 1; } }
body .dong_mo_menu #xiris-hdr-right,
body .dong_mo_menu .xr-hdr-tit { animation: xr-hdr-hien .22s ease-out both; }

/* ---------- Chỗ giữ sẵn cho cụm phải (1-2 giây đầu) ----------
   Bộ mặt thanh do CSS lo nên có ngay từ nhịp vẽ đầu, nhưng MỌI nút bên phải (cảnh báo, chuông,
   ảnh đại diện, ⋮) đều do JS dựng — mà thẻ <script> của xiris_switcher_project_perms.js nằm gần
   cuối <body>, sau 23 tệp CSS chặn dòng. Đo trên máy chủ dự án: thanh cụt mất bên phải khoảng
   1-2 giây sau mỗi lần tải lại ("khi load lại trang header nó bị như vầy tầm 1,2 giây").
   Không rút ngắn được chỗ đó bằng tệp riêng của aiwater, nên GIỮ CHỖ: ba ô mờ đúng cỡ nút thật,
   để thanh không cụt và các nút nhảy vào không làm xê dịch gì.
   ⚠ Thẻ khai trong layout.menutrai*.tpl kèm `hidden` (bố cục dùng chung 6 site). */
body .dong_mo_menu .xr-hdr-cho {
    display: flex;
    margin-left: auto;
    flex: 0 0 auto;
    gap: 8px;
    align-items: center;
    pointer-events: none;
}
body .dong_mo_menu .xr-hdr-cho span {
    width: 38px; height: 38px;
    border-radius: 11px;
    background: rgba(255, 255, 255, .12);
}
/* Cụm thật đã dựng xong thì chỗ giữ biến mất. hdr.js cũng gỡ hẳn thẻ này — luật dưới đây là
   đường lui cho lúc JS chưa kịp gỡ, và cho trình duyệt không hiểu `:has()` thì JS lo nốt. */
body .dong_mo_menu:has(#xiris-hdr-right) .xr-hdr-cho { display: none; }

/* ---------- Màn hẹp: cắt bớt cho vừa ----------
   Ở 375px cụm nút đã chiếm gần hết chỗ. Thu nút và bỏ ô icon của khối tên trước; KHÔNG giấu nút
   cảnh báo nguy cấp — đó là thứ phải thấy ngay. */
@media (max-width: 479px) {
    body .dong_mo_menu { padding: 0 6px; gap: 4px; }
    body .dong_mo_menu #xiris-hdr-right { gap: 4px; }
    body .dong_mo_menu > i.fa-bars,
    body .dong_mo_menu > i.fa-light,
    body .dong_mo_menu .xr-quay-lai,
    body .dong_mo_menu #xiris-cb-btn,
    body .dong_mo_menu #xiris-hdr-right .btn_noti,
    body .dong_mo_menu .xr-hdr-3c { width: 32px; height: 32px; min-width: 32px; border-radius: 9px; }
    body .dong_mo_menu > i.fa-bars { font-size: 19px; }
    body .dong_mo_menu #xiris-cb-btn i,
    body .dong_mo_menu #xiris-hdr-right .btn_noti i { font-size: 16px; }
    body .dong_mo_menu .xr-quay-lai svg { width: 19px; height: 19px; }
    body .dong_mo_menu .xr-hdr-ico { display: none; }
    body .dong_mo_menu .xr-hdr-tx b { font-size: 14.5px; }
    body .dong_mo_menu .xr-hdr-tx i { font-size: 11px; }
    body .dong_mo_menu .xr-hdr-vach { margin: 0; }
    body .dong_mo_menu .xr-hdr-anh, body .dong_mo_menu .xr-hdr-anh img { width: 30px; height: 30px; }
}

/* ---------- Lưới an toàn cho tấm chắn menu ----------
   ⚠⚠ 16/09/2026 — LỖI DO CHÍNH KHỐI NÀY GÂY RA, ĐỌC KỸ TRƯỚC KHI SỬA.
   Bản trước tôi siết tấm chắn lúc menu đang xếp:
       .xiris-menu-pending .box_menu_trai > *:not(.title_menu_trai) { visibility: hidden }
   Lớp `.xiris-menu-pending` chỉ được switcher gỡ khi xếp menu XONG. Hôm đó switcher không
   chạy xong (cụm nút phải của header cũng mất luôn), thế là luật trên biến cảnh chờ vài giây
   thành ẩn VĨNH VIỄN: thanh bên trái chỉ còn logo + tên site, đúng thứ được chừa lại. Chủ dự án
   báo "lỗi banh hết rồi bạn?" kèm ảnh chụp. ĐÃ GỠ luật đó.

   Bố cục vẫn còn tấm chắn RIÊNG của nó (`<style id="xiris-menu-guard">` trong layout.menutrai*.tpl,
   che `.big_item_menu` và `.workplace`) — cùng một tật: switcher hỏng là menu trống trơn mãi.
   Nên thay vì che thêm, ở đây đặt LƯỚI AN TOÀN: quá 5 giây thì hiện menu ra bằng mọi giá, dù
   chưa xếp xong. Thà thấy menu thô còn hơn không thấy gì.
   ⚠ Dùng `animation` chứ không phải luật thường: giá trị do animation giữ lại ĐÈ ĐƯỢC mọi khai
     báo thường, bất kể độ ưu tiên — nên nó thắng cả tấm chắn trong bố cục mà không cần !important
     và không cần đụng vào tệp dùng chung. Trễ 5 giây, `forwards` để giữ nguyên sau khi chạy. */
@keyframes xr-menu-lo { to { visibility: visible; } }
body .xiris-menu-pending .box_menu_trai .big_item_menu,
body .xiris-menu-pending .box_menu_trai .workplace,
body .xiris-menu-pending .menu_mb .big_item_menu,
body .xiris-menu-pending .menu_mb .workplace {
    animation: xr-menu-lo 0s linear 5s forwards;
}

/* ---------- Menu của nút ⋮ ----------
   ⚠ Panel gắn vào <body> chứ KHÔNG nằm trong .dong_mo_menu: .wrap_all_site có overflow:hidden
     nên thứ gì bung ra khỏi thanh đều bị cắt cụt — đúng bẫy đã dính với panel cảnh báo. */
.xr-hdr-menu {
    display: none;
    position: fixed;
    top: 54px; right: 10px;
    z-index: 1045;                 /* dưới modal 1050: mở hộp thoại là menu tự chìm xuống */
    width: 246px;
    padding: 6px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid #e6ebf1;
    box-shadow: 0 14px 40px rgba(15, 23, 42, .22);
}
.xr-hdr-menu.mo { display: block; }
.xr-hdr-menu .xr-hdr-ai {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 10px;
    border-radius: 10px;
    color: #0f172a; text-decoration: none;
}
.xr-hdr-menu .xr-hdr-ai:hover { background: #f1f5f9; }
.xr-hdr-menu .xr-hdr-ai img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.xr-hdr-menu .xr-hdr-ai .xu-tx { min-width: 0; }
.xr-hdr-menu .xr-hdr-ai b { display: block; font-size: 13.5px; }
.xr-hdr-menu .xr-hdr-ai i { display: block; font-style: normal; font-size: 11.5px; color: #5b6b7b; }
/* ⚠ Trả lại chữ cho chip người dùng và nút sáng/tối KHI chúng đã nằm trong menu.
   Switcher giấu chữ ở màn hẹp để thanh 56px đủ chỗ:
     @media(max-width:820px){#xiris-user .xu-tx{display:none}#xiris-user{max-width:none;padding:4px}}
     @media(max-width:560px){#xiris-theme span{display:none}#xiris-theme{padding:6px}}
   Hai luật đó bám theo PHẦN TỬ, nên dời phần tử vào menu là mất chữ theo — đo trên màn 375px:
   tên, vai trò và chữ "Chế độ tối" đều ra kích thước 0×0, menu chỉ còn ảnh với một mặt trăng
   trống trơn. Trong menu thì rộng rãi, phải hiện lại. Kèm ID cho đủ mạnh:
   (1,2,0) > (1,1,0) và (1,1,1) > (1,0,1). */
.xr-hdr-menu #xiris-user .xu-tx { display: block; }
.xr-hdr-menu #xiris-theme span,
.xr-hdr-menu #xiris-qr-btn span { display: inline; }
.xr-hdr-menu .xr-hdr-gach { height: 1px; margin: 5px 8px; background: #eef2f6; }
/* Nút chế độ sáng/tối được CHUYỂN vào đây — vẫn là phần tử #xiris-theme cũ, không dựng lại:
   paintThemeBtn() tìm nó theo id nên dời đi đâu cũng vẽ lại đúng. */
/* Nút quét QR nay nằm trong menu ⋮ (chủ dự án chốt 16/09/2026), dùng chung khuôn với nút
   sáng/tối. Switcher vẽ nó thành viên thuốc có viền cho thanh header — phải khai lại, kèm ID
   cho đủ mạnh: `.xr-hdr-menu #xiris-qr-btn` (1,1,0) > `#xiris-qr-btn` (1,0,0). */
.xr-hdr-menu #xiris-qr-btn,
.xr-hdr-menu #xr-hdr-caidat,
.xr-hdr-menu #xr-hdr-dangxuat,
.xr-hdr-menu #xiris-theme {
    display: flex !important;      /* thắng luật ẩn ở trên; cùng một tệp nên không có gì bất ngờ */
    align-items: center; gap: 10px;
    /* ⚠ Phải khai `justify-content`: switcher đặt `#xiris-qr-btn{justify-content:center}` cho
       viên thuốc trên thanh, luật đó theo nút vào menu làm dòng "Quét QR" canh giữa trong khi
       hai dòng còn lại canh trái (đo được 16/09/2026). */
    justify-content: flex-start;
    width: 100%; height: auto;
    padding: 10px; margin: 0;
    border: 0; background: none;
    border-radius: 10px;
    font: inherit; font-size: 13.5px; text-align: left;
    color: #0f172a; font-size: 13.5px; cursor: pointer;
}
.xr-hdr-menu #xiris-qr-btn:hover,
.xr-hdr-menu #xr-hdr-caidat:hover,
.xr-hdr-menu #xiris-theme:hover { background: #f1f5f9; }
.xr-hdr-menu #xiris-qr-btn i,
.xr-hdr-menu #xr-hdr-caidat i,
.xr-hdr-menu #xr-hdr-dangxuat i,
.xr-hdr-menu #xiris-theme i { width: 20px; text-align: center; font-size: 15px; color: #334155; }
/* Đăng xuất (05/10/2026) là thẻ <a>: phải ghim màu cả :link/:visited — style.css có
   `a:link{color:#1a3f5e}` (0,1,1) cướp màu, xem ghi chú đầu xiris_dark.css. Tô đỏ nhạt cho khác
   ba mục tuỳ chọn ở trên; ID giữ độ ưu tiên (1,1,0)/(1,2,0) thắng mọi luật chỉ có lớp. */
.xr-hdr-menu #xr-hdr-dangxuat,
.xr-hdr-menu #xr-hdr-dangxuat:link,
.xr-hdr-menu #xr-hdr-dangxuat:visited,
.xr-hdr-menu #xr-hdr-dangxuat:hover { color: #b91c1c; text-decoration: none; }
.xr-hdr-menu #xr-hdr-dangxuat i { color: #b91c1c; }
.xr-hdr-menu #xr-hdr-dangxuat:hover { background: #fef2f2; }

/* ---------- Bản tối ----------
   ⚠ CỐ TÌNH KHÔNG đè nền thanh ở đây. Chủ dự án: *"khi chuyển qua chế độ tối thì thành màu
     xanh đen như các màn hình hiện tại mới đúng"*. `xiris_dark.css:185` đã có sẵn đúng cái nền
     đó cho MỌI màn của site:
        html[data-xtheme="dark"] .dong_mo_menu {
            background: linear-gradient(180deg, rgba(9,37,51,.85), rgba(4,17,29,.85));
            border-bottom: 1px solid var(--x-line2);
            box-shadow: 0 1px 0 rgba(112,236,255,.18), 0 8px 26px -14px rgba(112,236,255,.5);
            backdrop-filter: blur(6px); }
     Luật đó là (0,2,1), còn luật nền sáng của ta là `body .dong_mo_menu` (0,1,1) → bản tối
     THẮNG sẵn, không phải viết thêm dòng nào. Viết đè vào đây là lệch khỏi phần còn lại
     của site, đúng thứ chủ dự án vừa bảo sửa. */
/* Chữ trong thanh do `html[data-xtheme="dark"] .dong_mo_menu *` (0,2,1) lo, đã là var(--x-ink).
   Riêng phụ đề bị dấu `*` đó quét thành cùng màu tên màn -> mất thứ bậc. Trả lại sắc mờ. */
html[data-xtheme="dark"] body .dong_mo_menu .xr-hdr-tx i { color: rgba(245, 251, 255, .68); }
/* Viền tách huy hiệu/chấm trực tuyến phải theo nền thanh. Nền tối là gradient trong suốt 85%
   nên không có một mã màu tuyệt đối — lấy sắc giữa hai đầu dải, đủ để tách khỏi icon. */
html[data-xtheme="dark"] body .dong_mo_menu .xr-hdr-anh::after,
html[data-xtheme="dark"] body .dong_mo_menu #xiris-hdr-right .so_luong_thong_bao,
html[data-xtheme="dark"] body .dong_mo_menu #xiris-cb-badge { border-color: #071a26; }
html[data-xtheme="dark"] .xr-hdr-menu {
    background: #0f1b2d;
    border-color: #24374f;
}
/* ⚠⚠ BA NHÓM BẢN TỐI DƯỚI ĐÂY PHẢI LIỆT KÊ ĐỦ CẢ BA MỤC CỦA MENU.
   29/09/2026, chủ dự án: *"sao ở chế độ tối cái này nó mất vậy trời"* — mục "Cài đặt ứng dụng"
   biến mất, chỉ còn trơ cái biểu tượng điện thoại. Lý do: lúc thêm mục đó người ta nhớ bổ sung
   `#xr-hdr-caidat` vào ba nhóm của BẢN SÁNG nhưng bỏ sót ba nhóm bản TỐI ở đây, nên nó giữ
   nguyên màu chữ sáng #0f172a (gần như đen) đặt trên nền tối — chữ vẫn có, chỉ là không đọc
   được. Thêm mục mới vào menu thì phải rà ĐỦ SÁU nhóm, đừng dừng ở nhóm đầu. */
html[data-xtheme="dark"] .xr-hdr-menu #xiris-qr-btn,
html[data-xtheme="dark"] .xr-hdr-menu #xr-hdr-caidat,
html[data-xtheme="dark"] .xr-hdr-menu #xiris-theme { color: #e2e8f0; }
html[data-xtheme="dark"] .xr-hdr-menu #xiris-qr-btn:hover,
html[data-xtheme="dark"] .xr-hdr-menu #xr-hdr-caidat:hover,
html[data-xtheme="dark"] .xr-hdr-menu #xiris-theme:hover { background: rgba(255, 255, 255, .06); }
/* ⚠ PHẢI viết kèm ID `#xiris-user` và đủ 4 trạng thái. Switcher ghim
   `#xiris-user,#xiris-user:link,#xiris-user:visited,#xiris-user:hover{color:#0f172a}` — độ ưu
   tiên (1,0,0) nhờ có ID, THẮNG mọi luật chỉ dùng lớp dù bao nhiêu lớp đi nữa. Viết bằng
   `.xr-hdr-menu .xr-hdr-ai` (0,3,1) là thua: đo được tên người dùng ra rgb(15,23,42) trên nền
   rgb(15,27,45), tức chữ đen trên nền đen, tỉ lệ tương phản ~1:1 (16/09/2026).
   Chính switcher cũng đã cảnh báo đúng cái bẫy này ở chỗ khác — ID vượt mặt mọi số lượng lớp. */
html[data-xtheme="dark"] .xr-hdr-menu #xiris-user,
html[data-xtheme="dark"] .xr-hdr-menu #xiris-user:link,
html[data-xtheme="dark"] .xr-hdr-menu #xiris-user:visited,
html[data-xtheme="dark"] .xr-hdr-menu #xiris-user:hover { color: #e2e8f0; }
html[data-xtheme="dark"] .xr-hdr-menu #xiris-user:hover { background: rgba(255, 255, 255, .06); }
html[data-xtheme="dark"] .xr-hdr-menu #xiris-role,
html[data-xtheme="dark"] .xr-hdr-menu .xr-hdr-ai i { color: #94a3b8; }
html[data-xtheme="dark"] .xr-hdr-menu .xr-hdr-gach { background: #24374f; }
html[data-xtheme="dark"] .xr-hdr-menu #xiris-qr-btn i,
html[data-xtheme="dark"] .xr-hdr-menu #xr-hdr-caidat i,
html[data-xtheme="dark"] .xr-hdr-menu #xiris-theme i { color: #e2e8f0; }
/* Đăng xuất bản tối — đỏ nhạt đủ tương phản trên nền #0f1b2d (cùng lý do ghim :link/:visited như bản sáng). */
html[data-xtheme="dark"] .xr-hdr-menu #xr-hdr-dangxuat,
html[data-xtheme="dark"] .xr-hdr-menu #xr-hdr-dangxuat:link,
html[data-xtheme="dark"] .xr-hdr-menu #xr-hdr-dangxuat:visited,
html[data-xtheme="dark"] .xr-hdr-menu #xr-hdr-dangxuat:hover,
html[data-xtheme="dark"] .xr-hdr-menu #xr-hdr-dangxuat i { color: #fca5a5; }
html[data-xtheme="dark"] .xr-hdr-menu #xr-hdr-dangxuat:hover { background: rgba(248, 113, 113, .10); }

/* =====================================================================================
 * DRAWER MENU MOBILE — chủ dự án 16/09/2026: "menu mobile nhìn bể vầy", xác nhận cả BỐN
 * triệu chứng: nền trắng khi đang chế độ tối · dòng quá to quá thưa · drawer không phủ hết
 * màn · chữ tên nhóm bị cắt cụt.
 *
 * ⚠ Menu dựng HAI BẢN từ cùng một nguồn: máy tính `.box_menu_trai`, điện thoại `.menu_mb`
 *   (xem chú thích trong modules/menu/global.dac_biet.tpl). Phần lớn luật "gọn" và luật bản
 *   tối chỉ phủ tới bản máy tính, nên bản điện thoại rơi về dáng mặc định.
 * ⚠ Viết ở đây (pwa/hdr.css, chỉ nạp cho aiwater) chứ KHÔNG sửa global.dac_biet.tpl hay
 *   style.css: hai tệp đó dùng chung 6 site.
 * ⚠ Bọc trong @media của khổ điện thoại đúng mốc theme đang dùng (991.98px) để không đụng
 *   tới menu máy tính.
 * ===================================================================================== */
@media (max-width: 991.98px) {

    /* ---------- 1. Phủ hết màn ----------
       `.menu_mb` đang ghìm `max-height: calc(100vh - 45px)`. Trên điện thoại `100vh` là chiều
       cao viewport LỚN NHẤT (tính cả phần thanh địa chỉ đang che) chứ không phải phần đang
       nhìn thấy, nên đáy drawer hụt đúng một khoảng — lòi trang phía sau và mấy nút nổi.
       `dvh` co giãn theo thanh địa chỉ. Trình duyệt cũ không hiểu `dvh` thì bỏ qua dòng này
       và giữ nguyên cách cũ, không hỏng thêm. Cùng bài đã dùng ở xiris_form.css. */
    body .menu_mobile{ max-height: 100dvh; }
    /* 24/09/2026 — chu du an: "sao menu khong cao full trang", "bo cai vien trang nay".
       Truoc day tru 45px cho mot thanh dau trang, nhung do lai thi ngan keo bat dau ngay
       tu y=0: phep tru chi de ho mot dai 45px o DAY, lo ra noi dung trang phia sau —
       nhin nhu mot vien trang. Do duoc o khung 350x858: .menu_mb cao 813.
       min-height de nen toi phu du chieu cao ca khi it muc; max-height giu cho no van
       cuon trong long minh chu khong day dai trang. */
    body .menu_mb{ /*ngan-keo-full*/ max-height: 100dvh; min-height: 100dvh; }

    /* ---------- 2. Dòng gọn lại ----------
       Mặc định mỗi mục cao gần gấp đôi bản máy tính, một màn chỉ thấy 6 mục. Ghìm chiều cao
       hàng, thu icon và cỡ chữ cho bằng bản máy tính. */
    body .menu_mb .big_item_menu > h3,
    body .menu_mb .big_item_menu > h3 > a{ margin: 0; }
    body .menu_mb .big_item_menu a{
        display: flex; align-items: center; gap: 10px;
        min-height: 40px; padding: 7px 12px;
        font-size: 14px; line-height: 1.3;
    }
    body .menu_mb .xm-ico{ flex: 0 0 auto; width: 20px; font-size: 15px; text-align: center; }
    body .menu_mb .xm-txt{ min-width: 0; }
    body .menu_mb .menu-group{
        min-height: 40px; padding: 7px 12px;
        font-size: 13px;
    }
    body .menu_mb .menu-cluster{ margin: 0 0 6px; }

    /* ---------- 3. Tên nhóm xuống dòng thay vì cắt cụt ----------
       "MẠNG LƯỚI CẤP THOÁT NƯ…" bị cắt trong khi drawer còn thừa chỗ ngang. Cho phép xuống
       dòng và bỏ dấu ba chấm. */
    body .menu_mb .menu-group,
    body .menu_mb .menu-group > span,
    body .menu_mb .xm-txt{
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        word-break: break-word;
    }

    /* ---------- 4. Bản tối ----------
       `.menu_mb` đã có luật nền tối trong global.dac_biet.tpl, nhưng dải tiêu đề
       `.thanh_ngang_mobile` (chứa tên site và dấu X) thì KHÔNG có luật nào — nên nó trắng.
       Khai đủ cả khung ngoài lẫn các mảng nền sáng bên trong. */
    html[data-xtheme="dark"] body .menu_mobile,
    html[data-xtheme="dark"] body .thanh_ngang_mobile,
    html[data-xtheme="dark"] body .menu_mb{ background: #0b1626; }
    html[data-xtheme="dark"] body .menu_mb .title_menu_trai,
    html[data-xtheme="dark"] body .menu_mb .menu-cluster,
    html[data-xtheme="dark"] body .menu_mb .mc-body,
    html[data-xtheme="dark"] body .menu_mb .big_item_menu,
    html[data-xtheme="dark"] body .menu_mb .big_item_menu > h3,
    html[data-xtheme="dark"] body .menu_mb .workplace,
    html[data-xtheme="dark"] body .menu_mb .workplace h3{ background: transparent; }
    html[data-xtheme="dark"] body .thanh_ngang_mobile,
    html[data-xtheme="dark"] body .thanh_ngang_mobile button,
    html[data-xtheme="dark"] body .menu_mb .site_name,
    html[data-xtheme="dark"] body .menu_mb h2{ color: #f5fbff; }
    html[data-xtheme="dark"] body .menu_mb .menu-group{ color: #9ec7dc; }
    html[data-xtheme="dark"] body .menu_mb .big_item_menu a{ color: #bfe9f5; }
    /* Ô icon của tiêu đề nhóm là mảng sáng đặc, trên nền tối nó nổi trắng lốp. */
    html[data-xtheme="dark"] body .menu_mb .menu-group .xm-ico,
    html[data-xtheme="dark"] body .menu_mb [class*="icon"]{ background: rgba(255, 255, 255, .07); }
    html[data-xtheme="dark"] body .menu_mb .big_item_menu.active > h3 > a,
    html[data-xtheme="dark"] body .menu_mb .big_item_menu.active a{ background: rgba(112, 236, 255, .12); }
}