/* /App_Themes/all/allcss/qi-menu-mb-nn.css */ /* ============================================================================= 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; /* 🔴 VÙNG CHẠM (sửa 2026-08-13, rà site thật khối trường Hải Phòng): trước là 38px, đo trên trang thật ra hộp **40×38** — dưới chuẩn 44px, và chính dải hụt đó là nguyên nhân lỗi "chạm vào mà khay không mở" từng gặp ở vỏ homemb2. Rà 99 mẫu × 3 vỏ: nút này dưới 44px ở **76 lượt điện thoại + 58 lượt máy tính bảng**. 🔑 CHỈ NỚI CHIỀU DỌC, KHÔNG nới ngang. Đo `thtrangcat` ở khổ 390px: thanh công cụ cao **48px** (đủ chỗ cho 44px), nhưng hai nút NẰM DÍNH NHAU — khe đúng **0px** (tìm kiếm x=307→345, menu x=345→385). Nới ngang thì vùng chạm hai nút chồng nhau 3px mỗi bên và nút đứng sau trong DOM sẽ CHE nút kia — đúng loại lỗi "vật chắn" mà trước đây phải dùng `document.elementFromPoint` mới tìm ra. Giữ `width:38px` ⇒ hình thức và vị trí ngang KHÔNG đổi. */ height: 44px; 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; } /* KHOẢNG CÁCH GIỮA CÁC MỤC TRONG KHAY ☰ — CHUẨN 10px (user báo 2026-08-13: “khoảng cách giữa các item trên menu khá lớn, chưa đúng chuẩn 10px”). Đo trên hanoi.edu.vn (khối “Liên kết”): mỗi mục là `

` bọc `` và ĐỆM BỊ CỘNG HAI TẦNG — `

` 8px trên + 10px dưới, `` 12px trên + 12px dưới ⇒ mục cao **62px** cho một dòng chữ 20px, khe giữa hai mục **18px**. Nhìn rất rỗng, đúng như user chỉ. Nay chỉ MỘT tầng chịu trách nhiệm đệm dọc: `` đúng 10px trên/dưới (mục cao ~40px, chạm vẫn thoải mái theo chuẩn 40px của điện thoại), còn `

` về 0. `.pb-3` của Bootstrap (`padding-bottom:1rem !important`) nên phải !important mới thắng. Đệm NGANG giữ 16px như cũ. */ .qimb-menu-in .row.my-4 > .col > p { padding: 0 !important; border-bottom: 0 !important; } .qimb-menu-in .row.my-4 > .col > p > a { padding-top: 10px !important; padding-bottom: 10px !important; } /* Khối ẢNH (Phần mềm tác nghiệp / quảng cáo): mỗi banner cũng là `

` nên đệm cũng cộng hai tầng — đo được khe giữa hai banner **40px** (8+12 dưới + 12+8 trên). Với chữ thì 10px trên/dưới là chuẩn (khe giữa hai mục = 0 vì có vạch phân cách), nhưng với ẢNH thì hai đệm 10px nằm cạnh nhau thành khe 20px ⇒ vẫn rộng. Cho ảnh 5px mỗi bên để khe giữa hai banner đúng **10px**. */ .qimb-menu-in .row.my-4 > .col > p > a:has(> img) { padding-top: 5px !important; padding-bottom: 5px !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.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; } /* /App_Themes/all/allcss/qi-noidung-mb2.css */ /* ============================================================================= BÙ KIỂU CHO TRANG TRONG CỦA VỎ homemb2 2026-08-13 Nạp ở: Pages/Shared/_MasterMobile2.cshtml 🔴 VÌ SAO CÓ TỆP NÀY — HỒI QUY DO CHÍNH ĐỢT SỬA 2026-08-13: Trước đây 42 trang `Pages/Mobile/*.cshtml` chạy vỏ chung `_MasterAllMobile`, vỏ đó nạp bộ `qiStyleAllMobile.css` + `qifontdefaultmobile.css` + `qicolordefaultmobile.css` — nơi định nghĩa các thành phần DÙNG CHUNG của trang trong: tiêu đề khối `.qihome_tieude/.qihome_tieudebg`, dải chuyên mục `.CatParent a`, nút `.btnqi`, bảng `GridViewStyle2`… Khi user yêu cầu "trang trong khớp vỏ homemb2", các trang đó chuyển sang `_MasterMobile2` — vỏ này dùng bộ giao diện tpthuduc và KHÔNG nạp ba tệp trên ⇒ mọi tiêu đề khối rơi về **màu link mặc định của Bootstrap 5 `rgb(13,110,253)` kèm GẠCH CHÂN, cỡ 16px**, nút `.btnqi` thì nền trong suốt trông như một dòng chữ đen. Đo được ở /Hoidapmb.aspx: 5 liên kết gạch chân xanh trong 340px đầu trang. ✅ Không nạp lại ba tệp kia (chúng là cả một bộ giao diện, sẽ đè hỏng vỏ tpthuduc) mà chép ĐÚNG những quy tắc của các thành phần dùng chung, lấy màu theo biến `--mau-md` của đơn vị. ✅ AN TOÀN VỚI TRANG CHỦ: đã đếm trên HTML thật của `/homemb2` — trang chủ dùng **0 lần** tất cả các lớp trong tệp này (`qihome_tieude`, `qihome_tieudebg`, `CatParent`, `btnqi`, `qiborderbottom-2`, `GridViewStyle2`), nên không có cách nào đụng vào giao diện trang chủ. ========================================================================== */ /* ---------- 1. Tiêu đề khối (mọi trang trong đều dùng) ---------- Gốc: qiStyleAllMobile.css (`padding:5px; width:100%`) + qicolordefaultmobile.css (`color:#1565c0`) + qifontdefaultmobile.css. Nay lấy màu theo đơn vị thay cho màu xanh cứng. */ .qihome_tieudebg { width: 100%; padding: 5px 0; background-image: none; } .qiborderbottom-2 { border-bottom: 2px solid var(--mau-md, #1565c0); } /* 🔑 `!important` cho MÀU (user chốt 2026-08-13: *"màu chữ chuyên mục hoặc tiêu đề form của tất cả các trang theo trang này"* — lấy trang Văn bản làm chuẩn, tức màu đơn vị `--mau-md`). Không có `!important` thì vài trang tự khai màu riêng ở CSS của trang (đo được "Chọn phòng ban" ở trang Cơ cấu tổ chức ra màu ĐỎ) ⇒ mỗi trang một màu, không đồng nhất. */ .qihome_tieude { display: inline-block; margin-bottom: 0; color: var(--mau-md, #1565c0) !important; font-size: 18px; font-weight: 600; text-decoration: none !important; /* thẻ `a` nên Bootstrap gạch chân */ } /* ---------- 2. Dải chuyên mục / đường dẫn (`.scrollmenu`) ---------- */ .CatParent a, .CatChirent a { color: var(--mau-md, #1565c0); font-weight: 600; text-decoration: none !important; } .scrollmenu { align-items: center; } /* ═══════════════════════════════════════════════════════════════════════════════════════════════ KHUNG TIÊU CHUẨN CHO DẢI TIÊU ĐỀ CHUYÊN MỤC / TÊN FORM (user chốt 2026-08-13: *"nên tạo 1 khung tiêu chuẩn cho việc hiển thị chuyên mục hoặc tiêu đề form để các trang được đồng nhất giống nhau"*, *"tên chuyên mục thì luôn luôn căn thẳng mép trái, ô chọn ngôn ngữ thì luôn luôn căn thẳng với nội dung mép phải, chuẩn cách lề 10px"*). ⚠️ HAI CẤU TRÚC KHÁC NHAU cùng tồn tại — đây là lý do các trang trước đây lệch nhau: · trang CHI TIẾT: `.qimb2-vo > div.d-flex > .scrollmenu` (+ khay ngôn ngữ cùng hàng) · trang CHUYÊN MỤC: `.qimb2-vo > .scrollmenu` (dải là con trực tiếp) Khai cho CẢ HAI dạng, và khi dải nằm trong hàng `d-flex` thì chính nó KHÔNG thêm lề nữa để không thành 20px. ═══════════════════════════════════════════════════════════════════════════════════════════════ */ .qimb2-vo > .scrollmenu, .qimb2-vo > .d-flex { padding-left: 10px !important; padding-right: 10px !important; align-items: center; } .qimb2-vo > .d-flex > .scrollmenu { padding-left: 0 !important; padding-right: 0 !important; } /* Tên chuyên mục: LUÔN sát mép trái của vùng nội dung, in đậm theo màu đơn vị, không gạch chân. 🔑 Nhắm cả thẻ `a` LẪN thẻ bao (`.CatParent`/`.CatChirent`) vì có trang in tên bằng liên kết, có trang in bằng chữ thường — trước đây chỉ khai cho `a` nên trang nào in chữ thường thì mất kiểu. */ .scrollmenu, .scrollmenu > ul, .scrollmenu li { list-style: none !important; /* có trang bọc trong