/* =============================================================================
   NÚT ☰ + TÌM KIẾM CỦA THANH CÔNG CỤ MOBILE — dựng theo mẫu gdnn1 (2026-08-11).
   Cặp với: Pages/Shared/Partials/_ThanhCongCuMbNn.cshtml + wwwroot/js/qi-menu-mb-nn.js

   Nguyên tắc bám theo gdnn1:
     · panel buông xuống ngay dưới thanh công cụ, KHÔNG chuyển trang;
     · nền mờ phía sau, chạm vào là đóng;
     · ba gạch chuyển thành dấu ✕ khi mở (dùng [aria-expanded="true"] như gdnn1);
     · hai panel không mở cùng lúc (JS lo).
   ========================================================================== */

/* ---- Hai nút trên thanh công cụ ---- */
.qimb-nut {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    flex: 0 0 auto;
    -webkit-tap-highlight-color: transparent;
    /* 🔴 TUYỆT ĐỐI KHÔNG đặt `color` ở đây. Màu trắng của hai nút trên nền xanh do bộ CSS màu của
       đơn vị (`qicolordefaultmobile.css` / `qiColorSiteMobile.css`) đặt qua `#open-left` và
       `.qimbsearch`. Tệp này nạp SAU nên chỉ cần một dòng `color: inherit` là đè mất màu ấy, nút
       tìm kiếm rơi về #333 và chìm vào nền xanh — đã đo đúng hiện tượng user báo 2026-08-11. */
}

.qimb-nut:hover, .qimb-nut:focus, .qimb-nut:active { text-decoration: none; outline: none; }
.qimb-nut-tim i { font-size: 18px; line-height: 1; }

/* Ba gạch vẽ bằng 3 span để chuyển thành dấu ✕ — y như .qinn-burger của gdnn1. */
.qimb-gach { display: flex; flex-direction: column; justify-content: center; gap: 4px; width: 20px; }
.qimb-gach > span {
    display: block;
    width: 20px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform .2s ease, opacity .2s ease;
}
.qimb-nut-menu[aria-expanded="true"] .qimb-gach > span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.qimb-nut-menu[aria-expanded="true"] .qimb-gach > span:nth-child(2) { opacity: 0; }
.qimb-nut-menu[aria-expanded="true"] .qimb-gach > span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---- Nền mờ phía sau khi có panel mở ---- */
.qimb-nen {
    position: fixed;
    inset: 0;
    background: rgba(17, 24, 39, .45);
    opacity: 0;
    transition: opacity .25s ease;
    z-index: 1040;
}
.qimb-nen.dang-mo { opacity: 1; }

/* ---- Khung chung của hai panel: buông xuống ngay dưới thanh công cụ ---- */
.qimb-tim, .qimb-menu {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    top: var(--qimb-dinh, 46px);   /* JS đo chiều cao thật của #toolbar rồi đặt lại */
    z-index: 1050;
    background: #fff;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .18);
    /* 🔴 Hai panel nằm TRONG ô chứa nút vốn có `text-align:right` của thanh công cụ. Tuy chúng
       position:fixed nhưng canh chữ VẪN thừa kế ⇒ cả danh mục bị đẩy sang phải (đo được trên ảnh
       chụp lần đầu). Trả về canh trái cho đúng một trang danh mục. */
    text-align: left;
}
.qimb-tim.dang-mo, .qimb-menu.dang-mo { display: block; animation: qimb-buong .22s ease; }

@keyframes qimb-buong {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ---- Panel tìm kiếm ---- */
.qimb-tim-in { display: flex; align-items: center; gap: 8px; padding: 10px 12px; }
.qimb-tim-in > i { flex: 0 0 auto; font-size: 15px; color: #6b7280; }
.qimb-tim-in input {
    flex: 1 1 auto;
    min-width: 0;
    height: 40px;
    padding: 0 12px;
    font-size: 15px;
    border: 1px solid #d7dbe0;
    border-radius: 10px;
    background: #fff;
    color: #1d2733;
}
.qimb-tim-in input:focus { outline: none; border-color: var(--mau-md, #0071a6); }
.qimb-tim-gui {
    flex: 0 0 auto;
    height: 40px;
    padding: 0 16px;
    border: 0;
    border-radius: 10px;
    background: var(--mau-md, #0071a6);
    color: #fff;
    font-size: 15px;
    cursor: pointer;
}
.qimb-tim-dong {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #6b7280;
    font-size: 16px;
    cursor: pointer;
}

/* ---- Panel menu ---- */
.qimb-menu-in {
    max-height: calc(100vh - var(--qimb-dinh, 46px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
.qimb-dangtai { padding: 20px 16px; color: #6b7280; font-size: 14px; text-align: center; }

/* =============================================================================
   NỘI DUNG TRONG PANEL ☰
   Giữ NGUYÊN VẸN các mục của /mobilemenupage (user chốt), chỉ chỉnh lại cách trình bày cho hợp
   với một khay trượt: bỏ lề rộng của trang riêng, gom các mục thành danh sách đều nhau, tiêu đề
   nhóm rõ ràng, và đường kẻ mảnh thay cho viền dày.
   ========================================================================== */
.qimb-menu-in .container { max-width: none; padding: 0; }
.qimb-menu-in .row { margin-left: 0 !important; margin-right: 0 !important; }
.qimb-menu-in [class*="col"] { padding-left: 0 !important; padding-right: 0 !important; }
.qimb-menu-in .mx-4 { margin-left: 0 !important; margin-right: 0 !important; }
.qimb-menu-in .row.my-4 { margin-top: 0 !important; margin-bottom: 0 !important; }

/* ---- Tiêu đề nhóm: Danh mục · Khối chức năng · Liên kết · Phần mềm tác nghiệp ---- */
.qimb-menu-in h5.qitieudemenumobile {
    margin: 0;
    padding: 12px 16px 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--mau-md, #0071a6) !important;
    background: #f5f7fa;
    border-bottom: 1px solid #e6e9ee;
}
.qimb-menu-in .border-bottom { border-bottom: 0 !important; }

/* ---- Mỗi mục là một dòng bấm được, cao đủ ngón tay ---- */
.qimb-menu-in p {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #eef0f3 !important;
}
.qimb-menu-in p > a,
.qimb-menu-in .qimenudoc a,
.qimb-menu-in ul li > a {
    display: block;
    padding: 12px 16px;
    font-size: 14.5px;
    line-height: 1.35;
    color: #1d2733 !important;
    text-decoration: none;
}
.qimb-menu-in p > a:active,
.qimb-menu-in ul li > a:active { background: #f1f5f9; }

/* Mục con thụt vào cho thấy thứ bậc. */
.qimb-menu-in p.pl-3 > a { padding-left: 30px; color: #45505f !important; font-size: 13.5px; }

/* ---- "Khối chức năng" vốn xếp 2 cột: trong khay hẹp thì cho về 1 cột cho dễ bấm ---- */
.qimb-menu-in .row > .col + .col { border-top: 1px solid #eef0f3; }

/* ---- Ô tìm kiếm sẵn có trong nội dung menu: bo góc lại cho đồng bộ ---- */
.qimb-menu-in .row:has(.input-group) { padding: 12px 16px; }

/* 🔴 Ô nhập và nút phải LUÔN cùng một dòng (user báo 2026-08-11: nút rớt xuống dòng dưới).
   Nguyên nhân: `.input-group` của Bootstrap 4 mặc định `flex-wrap: wrap`, mà bộ CSS mobile của hệ
   thống lại đặt ô nhập `width: 100%` ⇒ ô chiếm trọn dòng, đẩy nút xuống. Ghim cứng ba điều:
   không cho xuống dòng, ô nhập co giãn theo chỗ trống, và bỏ chặn co tối thiểu. */
.qimb-menu-in .input-group { flex-wrap: nowrap !important; width: 100% !important; }
.qimb-menu-in .input-group .qitextbox {
    height: 40px;
    border: 1px solid #d7dbe0;
    border-radius: 10px 0 0 10px;
    font-size: 14.5px;
    width: auto !important;      /* bỏ width:100% của bộ CSS mobile */
    flex: 1 1 auto !important;
    min-width: 0 !important;     /* cho phép co lại, không thì vẫn tràn */
}
.qimb-menu-in .input-group-append { flex: 0 0 auto; }
.qimb-menu-in .input-group .input-group-text {
    height: 40px;
    border: 0;
    border-radius: 0 10px 10px 0;
    background: var(--mau-md, #0071a6);
    color: #fff;
    cursor: pointer;
}

/* ---- Khay đổi ngôn ngữ + "xem giao diện máy tính": tách thành một dải nhẹ trên cùng ---- */
.qimb-menu-in > .container > .row:first-child { padding: 8px 16px 0; }
.qimb-menu-in .doigiaodien {
    display: block;
    padding: 10px 16px;
    font-size: 13.5px;
    color: var(--mau-md, #0071a6) !important;
}
.qimb-menu-in h5.qitieudemenumobile:has(.doigiaodien) {
    background: transparent;
    border-bottom: 1px solid #eef0f3;
    padding: 0;
    text-transform: none;
    letter-spacing: 0;
    font-size: 13.5px;
    font-weight: 500;
}

/* ---- Ảnh phần mềm tác nghiệp: LUÔN co theo bề ngang khay ----
   🔴 user báo 2026-08-11 "ảnh bị tràn không co theo khổ". Ảnh mang lớp `w-100` của Bootstrap
   (`width:100% !important`) nên chỉ đặt `max-width` là chưa chắc thắng khi thẻ cha rộng hơn khay.
   Ghim `max-width` bằng !important, và chặn cứng mọi thứ vượt khổ ở tầng khay. */
.qimb-menu-in img {
    max-width: 100% !important;
    height: auto !important;
    display: block;
}
.qimb-menu-in .row.my-4 > .col > p { padding: 8px 16px; border-bottom: 0 !important; }

/* Chốt chặn cuối: không thứ gì trong khay được rộng hơn khay. */
.qimb-menu-in { overflow-x: hidden; }
.qimb-menu-in .container,
.qimb-menu-in .row,
.qimb-menu-in [class*="col"],
.qimb-menu-in p,
.qimb-menu-in table { max-width: 100% !important; }

/* 🔴 KHÔNG cắt bớt gì trong panel (user chốt 2026-08-11: "nội dung trong dấu 3 gạch là nội dung
   trước đây"). Có lúc đã thử ẩn ô tìm kiếm trong panel cho khỏi trùng nút kính lúp — ĐÃ BỎ.
   Panel hiển thị NGUYÊN VẸN nội dung của /mobilemenupage: đổi ngôn ngữ, "xem giao diện máy tính",
   ô tìm kiếm, Danh mục, Khối chức năng, Liên kết, Phần mềm tác nghiệp.
   Thay đổi duy nhất so với trước là CÁCH MỞ: buông ra tại chỗ thay vì chuyển sang trang khác. */

/* =============================================================================
   CHỐNG "RÒ" CSS CỦA TRANG VÀO KHAY ☰   (user báo 2026-08-11: "màu nền và chữ bị ảnh hưởng")

   Ảnh chụp trên hcm.edu.vn: danh mục trong khay nằm trên MỘT KHỐI ĐỎ CHÓI, chữ tối đọc không ra.
   Đo lại trên tenant hcmedu (khổ 375px) thấy `ul.qimenudoc` có `background-color: red`.

   🔑 Nguồn KHÔNG phải tệp CSS nào của hệ thống, mà là một thẻ `style` NẰM TRONG NỘI DUNG CHÂN TRANG
   LƯU Ở CSDL của đơn vị (`div.infoFooter`). Đơn vị tự viết CSS cho thanh menu dọc bản MÁY TÍNH bằng
   bộ chọn TOÀN CỤC. Trước đây vô hại vì bản mobile là một TRANG RIÊNG (/mobilemenupage) không có chân
   trang; nay khay ☰ mở ngay trên trang chủ nên nội dung menu và CSS của đơn vị dùng chung một tài
   liệu ⇒ ba quy tắc dội vào khay:
     · `ul.qimenudoc { background-color: red; box-shadow: 0 0 2px }`        → khối đỏ
     · `ul.qimenudoc .qilist .qiitems a.parentNote { color:#004480!important; border-left:4px … }`
                                                                            → chữ đổi màu + vạch xám
     · `#sidebar { width:100%; margin-bottom:42px }`                        → thừa khoảng trống dưới

   Không sửa được ở nguồn (là dữ liệu của đơn vị, mỗi đơn vị một kiểu, sửa CSDL là đụng nội dung
   khách hàng). Vì vậy chặn ở phía khay, neo bằng **id** `#qimbMenuIn` — id thắng mọi bộ chọn theo
   lớp mà đơn vị viết, kể cả khi họ dùng !important. Khay trở lại đúng diện mạo của /mobilemenupage.

   ⚠️ Đây là một LOẠI lỗi, không phải một lỗi lẻ: đơn vị nào nhét CSS toàn cục vào nội dung CSDL đều
   có thể dội vào khay theo cách tương tự. Gặp báo lỗi "khay xấu/khác thường" ở đơn vị mới thì việc
   đầu tiên là liệt kê quy tắc rơi vào `#qimbMenuIn` rồi bổ sung vào khối này.
   ========================================================================== */
#qimbMenuIn ul.qimenudoc,
#qimbMenuIn ul.qimenudoc > li,
#qimbMenuIn ul.qimenudoc ul {
    background: transparent !important;
    box-shadow: none !important;
}

#qimbMenuIn #sidebar {
    width: auto !important;
    margin-bottom: 0 !important;
}

/* Mọi liên kết trong danh mục dùng CHUNG một kiểu chữ như phần còn lại của khay — kể cả mục cha mà
   đơn vị đã tô màu riêng. Bộ chọn dài đúng bằng bộ chọn của đơn vị + thêm id nên chắc chắn thắng.

   `text-transform` thì lại là chuyện của HỆ THỐNG chứ không phải của đơn vị: `cssmenudoc.css` dòng 1
   khai `ul.qimenudoc li a { color:#004580!important; text-transform: uppercase!important }` cho thanh
   menu dọc bản MÁY TÍNH. Trang /mobilemenupage không nạp tệp đó nên danh mục ở đấy vẫn viết thường —
   khay ☰ nằm trên trang chủ thì nạp, thành ra VIẾT HOA TOÀN BỘ, khác hẳn "nội dung như trước đây". */
#qimbMenuIn ul.qimenudoc a,
#qimbMenuIn ul.qimenudoc li a,
#qimbMenuIn ul.qimenudoc .qilist .qiitems a.parentNote {
    color: #1d2733 !important;
    text-transform: none !important;
    border-left: 0 !important;
    margin-left: 0 !important;
}

/* Khoá cuộn trang nền khi panel đang mở (JS gắn lớp này vào <body>). */
body.qimb-khoa-cuon { overflow: hidden; }

/* =============================================================================
   TÊN ĐƠN VỊ TRÊN THANH CÔNG CỤ — giữ ĐẦY ĐỦ, tối đa 2 dòng (user chốt 2026-08-11)

   Trước đây: một dòng, cỡ chữ theo clamp() của bề rộng màn hình, và tên >= 47 ký tự thì bị ép
   cứng 12px — tên dài vẫn tràn hoặc bị cắt cụt.
   Nay: cho xuống dòng thoải mái, JS hạ dần cỡ chữ tới khi bó gọn trong 2 dòng, KHÔNG cắt chữ.
   ========================================================================== */
#toolbar { align-items: center; }

#toolbar h1#siteTitle {
    margin: 2px auto;
    font-weight: 500;
    text-transform: uppercase;
    /* Bỏ cỡ chữ theo bề rộng màn hình: cỡ chữ nay do JS quyết theo ĐỘ DÀI TÊN. */
    font-size: inherit;
    line-height: 1.25;
}

#toolbar h1#siteTitle > a {
    display: block;
    font-size: 16px;                 /* JS hạ dần nếu quá 2 dòng (sàn 9px) */
    line-height: 1.25;
    white-space: normal;             /* CHO PHÉP xuống dòng — trước đây bị ép một dòng */
    overflow-wrap: anywhere;         /* tên có từ dài/không dấu cách vẫn ngắt được */
    text-align: center;
}

/* Thanh công cụ cao bao nhiêu là do tên dài mấy dòng ⇒ JS đo rồi đặt biến; nội dung trang
   đẩy xuống đúng bằng đó. Đặt !important để thắng quy tắc `.snap-content{top:46px!important}`
   khai sẵn trong các layout mobile (tệp này nạp SAU). */
.snap-content { top: var(--qimb-dinh, 46px) !important; }