/* =============================================================================
   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).
   ========================================================================== */

/* ---- CHIỀU CAO VÙNG NHÌN THẤY (dùng cho khay menu buông xuống) ----------------
   🔴 User báo 2026-08-12: "menu điện thoại không kéo hết được đến cuối".
   Gốc rễ: khay giới hạn bằng `100vh`, mà trên điện thoại `100vh` là chiều cao khi trình duyệt ĐÃ
   ẨN thanh địa chỉ. Lúc thanh địa chỉ + thanh điều hướng đang hiện, vùng nhìn thấy thấp hơn
   chừng 90–150px ⇒ đáy khay rơi ra ngoài màn hình: cuộn hết cỡ vẫn không thấy mấy mục cuối.

   Ba lớp, lớp sau đè lớp trước, lớp nào cũng HỢP LỆ ĐỘC LẬP (không dùng var() có fallback là
   đơn vị mới — kiểu đó mà trình duyệt cũ gặp thì hỏng cả khai báo, mất luôn giới hạn chiều cao):
     ① 100vh            — trình duyệt cũ;
     ② 100dvh           — bám vùng nhìn thấy, tự co giãn khi thanh địa chỉ ẩn/hiện;
     ③ JS ghi đè bằng số px đo từ `visualViewport` (qi-menu-mb-nn.js) — đúng cho cả nhóm ①. */
:root { --qimb-vung: 100vh; }
@supports (height: 100dvh) {
    :root { --qimb-vung: 100dvh; }
}

/* ---- 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 {
    /* 🔴 KHÔNG dùng riêng 100vh (user báo 2026-08-12: "menu điện thoại không kéo hết được đến cuối").
       Trên điện thoại `100vh` là chiều cao khi trình duyệt ĐÃ ẨN thanh địa chỉ. Lúc thanh địa chỉ và
       thanh điều hướng đang hiện, vùng nhìn thấy THẤP HƠN 100vh chừng 90–150px ⇒ đáy khay rơi ra
       ngoài màn hình và không tài nào cuộn tới được (khay đã cuộn hết cỡ).
       `100dvh` bám theo vùng nhìn thấy THẬT và tự co giãn khi thanh địa chỉ ẩn/hiện.
       Giữ dòng 100vh phía trên làm dự phòng cho trình duyệt cũ chưa biết dvh. */
    max-height: calc(var(--qimb-vung) - var(--qimb-dinh, 46px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    /* chừa chỗ cho vạch Home của iPhone + để mục cuối không dính sát mép */
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}
.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; }