/* ==========================================================================
   megamenu-panel.css — panel menu ngang kiểu "Panel trắng sạch" (skin bvyhct)
   Tạo 2026-10-07 — xem docs/module-news/33_UI_MENU_HEADER_PANEL_TRANG.md
   Đi kèm Mega2DNN/Mega2DNN.xslt (markup: .mm-grid > .mm-col > .mm-title + ul.mm-links).
   Nạp trong Home.ascx / Detail - 2col.ascx / Admin.ascx kèm ?v= (tăng v mỗi lần sửa).
   Ghi đè Mega2DNN.css bằng selector #megamenu (độ ưu tiên cao hơn), không sửa file đó.
   ========================================================================== */

/* ---- Panel: nền trắng đặc, bo góc dưới, bóng mềm, trượt xuống nhẹ ------- */
#megamenu > li.level0 > .sub {
    left: 0;
    right: 0;
    margin: 0 !important;
    width: auto !important;
    padding: 22px 26px 16px;
    background: #fff;
    border-radius: 0 0 14px 14px;
    box-shadow: 0 18px 38px rgba(15, 60, 90, .18), 0 2px 6px rgba(15, 60, 90, .08);
    -webkit-animation: mmSlideDown .22s ease-out;
    animation: mmSlideDown .22s ease-out;
    font-family: var(--bv-font, 'Roboto Condensed', Tahoma, Arial, sans-serif);
}

@-webkit-keyframes mmSlideDown {
    from { opacity: 0; -webkit-transform: translateY(-10px); transform: translateY(-10px); }
    to   { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); }
}
@keyframes mmSlideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---- Panel nhỏ (1-3 cột): co theo nội dung, mở ngay dưới mục cha -------------
   Panel >= 4 cột (class li .mm-li-wide, vd. "Giới thiệu") giữ nguyên: rộng bằng thanh menu.
   Độ rộng = N cột x 250px + (N-1) x 30px + padding 52px. Hai mục cuối có >= 2 cột (.mm-right) căn phải. */
#megamenu > li.level0:not(.mm-li-wide) { position: relative; }
#megamenu > li.level0:not(.mm-li-wide) > .sub { right: auto; }
#megamenu > li.level0.mm-right > .sub { left: auto; right: 0; }
#megamenu > li.level0 > .sub.mm-sub-1 { width: 302px !important; }
#megamenu > li.level0 > .sub.mm-sub-2 { width: 582px !important; }
#megamenu > li.level0 > .sub.mm-sub-3 { width: 862px !important; }

/* ---- Lưới cột ------------------------------------------------------------ */
#megamenu .mm-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 240px));
    column-gap: 30px;
    row-gap: 18px;
    align-items: start;
}
#megamenu .mm-grid.mm-cols-1 { grid-template-columns: minmax(0, 1fr); }
#megamenu .mm-grid.mm-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#megamenu .mm-grid.mm-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#megamenu .mm-grid.mm-cols-4 { grid-template-columns: repeat(4, minmax(0, 240px)); }
#megamenu .mm-grid.mm-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

#megamenu .mm-col { min-width: 0; }
/* Nhóm dài (> 6 link): rộng 2 cột, danh sách tự chia 2 cột cân bằng */
#megamenu .mm-col.mm-wide { grid-column: span 2; }
#megamenu .mm-col.mm-wide .mm-links {
    -webkit-column-count: 2;
    column-count: 2;
    -webkit-column-gap: 30px;
    column-gap: 30px;
}
#megamenu .mm-col.mm-wide .mm-links li { -webkit-column-break-inside: avoid; break-inside: avoid; }

/* Cột "mục lẻ" (cấp 1 không có con): nếu đứng cạnh các nhóm có tiêu đề thì hạ xuống ngang hàng link */
#megamenu .mm-grid.mm-mixed .mm-plain { padding-top: 47px; }

/* ---- Tiêu đề cột + gạch chân ngắn #139cd0 ------------------------------- */
#megamenu .mm-title { margin: 0 0 12px; padding: 0; }
#megamenu .mm-title a {
    float: none;
    display: inline-block;
    padding: 0;
    margin: 0;
    color: #1d2b3a;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    line-height: 22px;
    text-transform: none;
    text-decoration: none;
    cursor: pointer;
}
#megamenu .mm-title a:hover { color: #0b78a6; }
#megamenu .mm-title::after {
    content: '';
    display: block;
    width: 36px;
    height: 3px;
    margin-top: 8px;
    border-radius: 3px;
    background: #139cd0;
}

/* ---- Danh sách link ------------------------------------------------------ */
#megamenu .sub ul.mm-links {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 14px;          /* Mega2DNN.css đặt font-size:0 cho ul trong .sub */
    word-spacing: normal;
    letter-spacing: normal;
}
#megamenu .sub ul.mm-links > li {
    display: block;
    float: none;
    width: auto;
    margin: 0 0 2px;
    padding: 0;
    font-size: 14px;
    line-height: 1.35;
}
#megamenu .sub .mm-links li a {
    float: none;
    display: flex;
    align-items: flex-start;
    margin: 0;
    padding: 7px 10px;
    border-radius: 6px;
    color: #2b3a4a;
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.35;
    text-transform: none;
    text-decoration: none;
    background: transparent;
    -webkit-transition: background-color .18s ease, color .18s ease;
    transition: background-color .18s ease, color .18s ease;
}
#megamenu .sub .mm-links li.mm-sub a { padding-left: 24px; }

#megamenu .sub .mm-links .mm-arrow {
    flex: 0 0 auto;
    margin-right: 8px;
    color: #7b8a99;
    font-size: 16px;
    line-height: 1.2;
    -webkit-transition: -webkit-transform .18s ease, color .18s ease;
    transition: transform .18s ease, color .18s ease;
}
#megamenu .sub .mm-links .mm-text { min-width: 0; }

/* Hover / focus: nền xanh rất nhạt, chữ xanh, mũi tên trượt sang phải */
#megamenu .sub .mm-links li a:hover,
#megamenu .sub .mm-links li a:focus {
    background: #eaf6fc;
    color: #0b78a6;
    outline: none;
}
#megamenu .sub .mm-links li a:hover .mm-arrow,
#megamenu .sub .mm-links li a:focus .mm-arrow {
    color: #139cd0;
    -webkit-transform: translateX(4px);
    transform: translateX(4px);
}
#megamenu .sub .mm-links li a:focus-visible,
#megamenu .sub .mm-title a:focus-visible {
    outline: 2px solid #139cd0;
    outline-offset: 1px;
}
/* Mega2DNN.css vẽ thanh đỏ ::before khi hover mọi link trong menu — không áp dụng trong panel */
#megamenu .sub a:hover:before { display: none; }

/* ---- Màn hình hẹp (tablet) ---------------------------------------------- */
@media (max-width: 991px) {
    #megamenu > li.level0 > .sub { padding: 18px 16px 12px; }
    /* màn hình hẹp: mọi panel rộng bằng thanh menu như cũ */
    #megamenu > li.level0:not(.mm-li-wide) { position: static; }
    #megamenu > li.level0 > .sub,
    #megamenu > li.level0.mm-right > .sub,
    #megamenu > li.level0:not(.mm-li-wide) > .sub { left: 0; right: 0; }
    #megamenu > li.level0 > .sub.mm-sub-1,
    #megamenu > li.level0 > .sub.mm-sub-2,
    #megamenu > li.level0 > .sub.mm-sub-3 { width: auto !important; }
    #megamenu .mm-grid,
    #megamenu .mm-grid.mm-cols-1,
    #megamenu .mm-grid.mm-cols-2,
    #megamenu .mm-grid.mm-cols-3,
    #megamenu .mm-grid.mm-cols-4,
    #megamenu .mm-grid.mm-cols-5 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: 18px;
    }
    #megamenu .mm-grid.mm-mixed .mm-plain { padding-top: 0; }
}
@media (max-width: 767px) {
    #megamenu .mm-grid,
    #megamenu .mm-grid.mm-cols-1,
    #megamenu .mm-grid.mm-cols-2,
    #megamenu .mm-grid.mm-cols-3,
    #megamenu .mm-grid.mm-cols-4,
    #megamenu .mm-grid.mm-cols-5 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Người dùng bật "giảm chuyển động" */
@media (prefers-reduced-motion: reduce) {
    #megamenu > li.level0 > .sub { -webkit-animation: none; animation: none; }
    #megamenu .sub .mm-links .mm-arrow { -webkit-transition: none; transition: none; }
}