/* =====================================================================================================
   MEGA MENU KIỂU BÁO ĐIỆN TỬ — DÙNG CHUNG cho mọi vỏ (tách 08/10/2026 từ MenuNgang/Default.cshtml).
   Áp cho khay có lớp `.megamenu.qimm`; khung bên trong do QiMegaMenu.Khung() (Support/QiMegaMenu.cs)
   dựng, nội dung nhóm do MegaMenuBuilder.Dung(..., gon: true). JS đi kèm: /js/qi-megamenu.js.
   Dùng ở: menu ngang chung · vỏ Thủ Đức · vỏ Hóc Môn · mẫu 15 (+ bản tiếng Anh).
   `body .dropdown-menu.megamenu.qimm` (0-3-1) + !important: thắng luật riêng của từng vỏ
   (hocmon.css `.qimenu22 .megamenu`, tpthuduc `.header .qimenu .megamenu`, qistyleall-modern…).
   ===================================================================================================== */
    /* ── Mega menu kiểu báo điện tử (VnExpress/24h, user chốt 07/10/2026) ──────────────────────────
       Bảng là MỘT Ô bằng khung nội dung: nền xám nhạt, viền 4 cạnh, chữ cách mép 10px · đầu bảng "Tất cả chuyên mục" + ô tìm + nút Đóng · LƯỚI cột thẳng hàng: tiêu đề
       nhóm màu chủ đạo, mục con chữ trơn, mỗi nhóm hiện 4 mục + "Xem thêm" · cột phải: chuyên mục lẻ
       in đậm + Liên hệ / Sơ đồ website. */
body .dropdown-menu.megamenu.qimm {
        /*  CẢ KHỐI là một ô (user 08/10/2026): nền xám nhạt, viền đủ 4 cạnh, chữ cách mép 10px. */
        background: var(--qimm-nen) !important; border: 1px solid var(--qimm-vien) !important; border-top: 0 !important;
        border-radius: 0 0 8px 8px !important;   /* dính sát, thẳng mép thanh menu phía trên (user 08/10/2026) */
        padding: 0 10px 12px !important; margin: 0 !important; top: 100% !important;
        box-shadow: 0 18px 36px -14px rgba(16,32,52,.30) !important;
        max-height: calc(100vh - 110px); overflow-y: auto; overscroll-behavior: contain; color: #222;
    }
body .dropdown-menu.megamenu.qimm.show { display: block !important; }
body .dropdown-menu.megamenu.qimm {
        --qimm-nen: #F4F5F7;   /* xám nhạt — user chọn 08/10/2026 (so với kem #FDF2D6 của hcm.edu.vn), hợp mọi màu chủ đạo */
        --qimm-vien: #DDE1E6;
    }
body .dropdown-menu.megamenu.qimm .qimm-dau {
        display: flex; align-items: center; gap: 16px; padding: 16px 0 12px; margin-bottom: 18px; border-bottom: 1px solid #d8dce2;
    }
body .dropdown-menu.megamenu.qimm .qimm-tieude { font-size: 19px; font-weight: 700; line-height: 1.3; font-family: inherit; /* Georgia thiếu dấu tiếng Việt ⇒ "Tấ́t" vỡ */ color: #222; white-space: nowrap; }
body .dropdown-menu.megamenu.qimm .qimm-dong {
        margin-left: auto; display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 6px 0;
        color: #076db6; font-size: 14px; cursor: pointer; white-space: nowrap;
    }
body .dropdown-menu.megamenu.qimm .qimm-dong svg { width: 20px; height: 20px; }
body .dropdown-menu.megamenu.qimm .qimm-than { display: flex; align-items: flex-start; }
body .dropdown-menu.megamenu.qimm .qimm-luoi {
        flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
        column-gap: 24px; row-gap: 22px; align-items: start;
    }
body .dropdown-menu.megamenu.qimm .qimm-ben {
        flex: 0 0 200px; margin-left: 20px; padding-left: 14px; border-left: 1px solid var(--qimm-vien); align-self: stretch;
    }
body .dropdown-menu.megamenu.qimm .mnclear {
        display: block; width: auto !important; max-width: none !important; flex: none !important; float: none;
        padding: 0 !important; margin: 0 !important;
        height: auto !important; min-height: 0 !important; overflow: visible !important; /* luật cũ trong @media ép cao 210px */
    }
body .dropdown-menu.megamenu.qimm .widget { background: none !important; border: 0 !important; padding: 0 !important; margin: 0 !important; }
body .dropdown-menu.megamenu.qimm .widget-title { border: 0 !important; margin: 0 0 6px !important; padding: 0 !important; }
body .dropdown-menu.megamenu.qimm .widget-title::after { display: none; }
body .dropdown-menu.megamenu.qimm .widget-title a {
        font-size: 14px !important; font-weight: 700 !important; text-transform: none !important; letter-spacing: 0 !important;
        line-height: 1.35; color: var(--m-primary, #0B4F8A) !important; text-decoration: none !important;
    }
body .dropdown-menu.megamenu.qimm .widget-title a:hover { text-decoration: underline !important; }
body .dropdown-menu.megamenu.qimm .maxhieght { max-height: none !important; overflow: visible !important; padding: 0 !important; margin: 0; }
body .dropdown-menu.megamenu.qimm .maxhieght .maxhieght,
body .dropdown-menu.megamenu.qimm .sub22 { margin: 0 0 2px; padding-left: 12px; border-left: 0; }
    /*  Cấp con: thụt lề + chấm tròn nhỏ màu nhạt (user 08/10/2026: đường kẻ dọc trông như gạch đầu dòng, xấu). */
body .dropdown-menu.megamenu.qimm .maxhieght .maxhieght a.nav-link2 { position: relative; padding-left: 10px !important; }
body .dropdown-menu.megamenu.qimm .maxhieght .maxhieght a.nav-link2::before {
        content: ''; position: absolute; left: 0; top: calc(.7em - 2px); width: 4px; height: 4px; border-radius: 50%;
        background: color-mix(in srgb, var(--m-primary, #0B4F8A) 45%, #fff);
    }
body .dropdown-menu.megamenu.qimm .navbar-item { margin: 0 !important; }
body .dropdown-menu.megamenu.qimm a.nav-link2 {
        display: block; font-size: 13px !important; font-weight: 400 !important; line-height: 1.4; color: #222 !important; text-transform: none !important;
        padding: 5px 0 !important; border-radius: 0 !important; background: none !important; text-decoration: none !important;
    }
body .dropdown-menu.megamenu.qimm a.nav-link2:hover { color: var(--m-primary, #0B4F8A) !important; padding-left: 0 !important; }
body .dropdown-menu.megamenu.qimm .maxhieght .maxhieght a.nav-link2 { font-size: 12.5px !important; color: #4b5563 !important; }
body .dropdown-menu.megamenu.qimm .qimm-xemthem {
        display: inline-block; margin-top: 6px; padding: 6px 0 0; min-width: 80px; border: 0; border-top: 1px solid #d8dce2;
        background: none; color: #757575; font-size: 12px; text-align: left; cursor: pointer;
    }
body .dropdown-menu.megamenu.qimm .qimm-xemthem:hover { color: var(--m-primary, #0B4F8A); }
body .dropdown-menu.megamenu.qimm:not(.qimm-dang-tim) .mnclear:not(.qimm-mo) .qimm-du { display: none !important; }
body .dropdown-menu.megamenu.qimm.qimm-dang-tim .qimm-xemthem { display: none; }
body .dropdown-menu.megamenu.qimm .qimm-an { display: none !important; }

    /* Cột phải: chuyên mục lẻ + liên kết chung, in đậm như cột "Spotlight / Ảnh" của VnExpress */
body .dropdown-menu.megamenu.qimm .qimm-ben .widget-title { display: none; }
body .dropdown-menu.megamenu.qimm .qimm-ben a.nav-link2,
body .dropdown-menu.megamenu.qimm .qimm-ben .qimm-chung a { font-size: 14px !important; font-weight: 700 !important; color: #222 !important; padding: 6px 0 !important; display: block; text-decoration: none; }
body .dropdown-menu.megamenu.qimm .qimm-ben .qimm-chung a:hover { color: var(--m-primary, #0B4F8A) !important; }
body .dropdown-menu.megamenu.qimm .qimm-ben .qimm-khac + .qimm-chung { margin-top: 12px; padding-top: 12px; border-top: 1px solid #d8dce2; }
body .dropdown-menu.megamenu.qimm .qimm-ben .qimm-chung a { font-weight: 400 !important; font-size: 13.5px !important; }

    /* Ô tìm nhanh (nằm giữa đầu bảng) */
body .dropdown-menu.megamenu.qimm .qimm-tim { position: relative; flex: 0 1 320px; margin: 0 0 0 auto; }
body .dropdown-menu.megamenu.qimm .qimm-tim input {
        width: 100%; height: 36px; border: 1px solid #d8dce2; border-radius: 18px; padding: 0 14px 0 36px;
        font-size: 14px; outline: none; background: #f7f7f7; transition: border-color .15s ease, background .15s ease;
    }
body .dropdown-menu.megamenu.qimm .qimm-tim input:focus { border-color: var(--m-primary, #0B4F8A); background: #fff; }
body .dropdown-menu.megamenu.qimm .qimm-tim svg { position: absolute; left: 13px; top: 10px; color: #94a3b8; pointer-events: none; }
body .dropdown-menu.megamenu.qimm .qimm-tim + .qimm-dong { margin-left: 8px; }
body .dropdown-menu.megamenu.qimm .qimm-trong { grid-column: 1 / -1; display: none; padding: 18px 0; color: #64748b; font-size: 14px; }

@media (max-width: 991.98px) {
    body .dropdown-menu.megamenu.qimm .qimm-than { display: block; }
    body .dropdown-menu.megamenu.qimm .qimm-ben { margin: 18px 0 0; padding: 12px 0 0; border-left: 0; border-top: 1px solid var(--qimm-vien); }
    body .dropdown-menu.megamenu.qimm .qimm-tieude { display: none; }
    body .dropdown-menu.megamenu.qimm .qimm-luoi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }

/* Bấm Đóng ở vỏ mở-bằng-rê-chuột: ẩn hẳn tới khi chuột rời menu (xem qi-megamenu.js). */
body .dropdown-menu.megamenu.qimm.qimm-tat { display: none !important; }

/* CẦU NỐI rê chuột (08/10/2026, user: thpttranhuutrang "hover vào không di chuột xuống megamenu được, tự ẩn").
   Vỏ mở bảng bằng :hover mà giữa nút và bảng có KHE (Hóc Môn 9px) ⇒ chuột qua khe là mất :hover.
   Dải trong suốt ngay dưới nút, cao ĐÚNG bằng khe (JS đo, biến --qimm-cau) — không đè lên bảng. */
body .has-megamenu:has(> .megamenu.qimm) > [data-toggle="dropdown"] { position: relative; }
body .has-megamenu:has(> .megamenu.qimm):hover > [data-toggle="dropdown"]::before {
    content: ""; position: absolute; left: -16px; right: -16px; top: 100%; height: var(--qimm-cau, 0px); z-index: 5;
}

/* XUỐNG DÒNG + TỐI ĐA 2 DÒNG (08/10/2026, user báo thptannhontay: tên chuyên mục dài tràn đè cột bên cạnh).
   Mẫu đặt `.qimenu .nav-item{white-space:nowrap}` lên nút mở ⇒ bảng THỪA HƯỞNG. Cho xuống dòng; tên quá dài
   cắt ở 2 dòng kèm "…" (tên đầy đủ hiện khi rê chuột — JS gắn title). */
body .dropdown-menu.megamenu.qimm, body .dropdown-menu.megamenu.qimm * { white-space: normal !important; }
body .dropdown-menu.megamenu.qimm .mnclear, body .dropdown-menu.megamenu.qimm .qimm-ben { min-width: 0; }
body .dropdown-menu.megamenu.qimm a.nav-link2,
body .dropdown-menu.megamenu.qimm .widget-title a {
    display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
    overflow: hidden !important; overflow-wrap: anywhere; text-overflow: ellipsis;
}
/* Phần cắt tính tới mép VÙNG ĐỆM ⇒ đệm trên/dưới 5px làm lộ mẩu dòng thứ 3 — chuyển thành khoảng cách ngoài. */
body .dropdown-menu.megamenu.qimm a.nav-link2 { padding-top: 0 !important; padding-bottom: 0 !important; margin: 5px 0 !important; }