/* =====================================================================
   MENU ĐIỆN THOẠI (jquery.mmenu 6 – #menu-mobile) dùng chung cho các theme trong Content/themes.

   - File này chỉ dựng khung (thanh tiêu đề, mục menu, mũi tên, mục đang chọn...). Màu / font / bo góc lấy từ biến --pmm-*.
   - Mỗi theme khai báo lại biến trong khối "MENU ĐIỆN THOẠI" ở cuối file CSS của theme (nạp SAU file này nên đè được).
   - mmenu chuyển #menu-mobile ra thẳng <body>, nên không dùng được class bọc trang của theme: luôn chọn theo #menu-mobile
     (id cũng giúp đè quy tắc chung trong main.css như chữ cam #DA3B01 trên thanh tiêu đề).
   - Không đổi độ rộng menu: kiểu "đẩy trang" của mmenu tính sẵn theo 80%.
   ===================================================================== */

#menu-mobile.mm-menu {
    --pmm-bg: #ffffff;              /* nền vùng danh sách */
    --pmm-item-bg: transparent;     /* nền từng mục (theme dạng thẻ đặt màu trắng trên nền ngà / xám) */
    --pmm-text: #1f2937;            /* chữ mục menu */
    --pmm-line: #e5e7eb;            /* đường kẻ giữa các mục (transparent để bỏ) */
    --pmm-head-bg: #1f6fb2;         /* nền thanh tiêu đề (màu hoặc gradient) */
    --pmm-head-text: #ffffff;       /* chữ + nút quay lại trên thanh tiêu đề */
    --pmm-head-rule: transparent;   /* vạch nhấn dưới thanh tiêu đề */
    --pmm-accent: #1f6fb2;          /* màu nhấn: mục đang chọn, vạch trái, biểu tượng mục con */
    --pmm-accent-soft: #eef5fb;     /* nền mục đang chọn / khi chạm */
    --pmm-arrow: var(--pmm-accent); /* mũi tên mở mục con */
    --pmm-font: inherit;            /* font mục menu */
    --pmm-head-font: inherit;       /* font thanh tiêu đề */
    --pmm-size: 15px;
    --pmm-weight: 600;
    --pmm-transform: none;          /* uppercase nếu theme dùng chữ hoa */
    --pmm-spacing: normal;          /* giãn chữ */
    --pmm-radius: 0px;              /* bo góc mục (> 0 thì mục tách thành thẻ) */
    --pmm-gap: 0px;                 /* khoảng cách giữa các mục */
    --pmm-inset: 0px;               /* lề trái/phải của mục */
    background: var(--pmm-bg);
    color: var(--pmm-text);
    border-color: var(--pmm-line);
    font-family: var(--pmm-font);
}

#menu-mobile.mm-menu .mm-panels,
#menu-mobile.mm-menu .mm-panels > .mm-panel {
    background: var(--pmm-bg);
}

/* ---- Thanh tiêu đề ("Menu" / tên mục cha + nút quay lại) ---- */
#menu-mobile.mm-menu .mm-panels > .mm-panel.mm-hasnavbar {
    padding-top: 56px;
}

#menu-mobile.mm-menu .mm-navbar {
    height: 56px;
    padding: 0 52px;
    border-bottom: 0;
    background: var(--pmm-head-bg);
    box-shadow: inset 0 -3px 0 var(--pmm-head-rule);
}

#menu-mobile.mm-menu .mm-navbar > *,
#menu-mobile.mm-menu .mm-navbar a {
    color: var(--pmm-head-text);
}

#menu-mobile.mm-menu .mm-navbar .mm-title {
    padding: 0;
    line-height: 56px;
    font-family: var(--pmm-head-font);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

#menu-mobile.mm-menu .mm-navbar .mm-btn {
    width: 52px;
    height: 56px;
    padding: 0;
}

#menu-mobile.mm-menu .mm-navbar .mm-btn:before,
#menu-mobile.mm-menu .mm-navbar .mm-btn:after {
    border-color: var(--pmm-head-text);
}

/* ---- Danh sách mục ---- */
#menu-mobile.mm-menu .mm-panels > .mm-panel > .mm-listview {
    font-size: var(--pmm-size);
    line-height: 22px;
}

#menu-mobile.mm-menu .mm-panels > .mm-panel > .mm-navbar + .mm-listview,
#menu-mobile.mm-menu .mm-panels > .mm-panel > .mm-listview:first-child {
    margin-top: calc(-20px + 8px + var(--pmm-gap));
}

#menu-mobile.mm-menu .mm-listview > li {
    margin: 0 var(--pmm-inset) var(--pmm-gap);
    border-radius: var(--pmm-radius);
    background: var(--pmm-item-bg);
    border-color: var(--pmm-line);
}

#menu-mobile.mm-menu .mm-listview > li:not(.mm-divider):after {
    left: 20px;
    border-color: var(--pmm-line);
}

#menu-mobile.mm-menu .mm-listview > li:last-child:after {
    display: none;
}

#menu-mobile.mm-menu .mm-listview > li > a:not(.mm-next),
#menu-mobile.mm-menu .mm-listview > li > span {
    position: relative;
    padding: 13px 16px 13px 20px;
    border-radius: var(--pmm-radius);
    color: var(--pmm-text);
    font-family: var(--pmm-font);
    font-weight: var(--pmm-weight);
    text-transform: var(--pmm-transform);
    letter-spacing: var(--pmm-spacing);
    /* Tên mục dài xuống dòng thay vì bị cắt "..." trên màn hình hẹp */
    white-space: normal;
    transition: background-color .2s, color .2s;
}

/* Chừa chỗ cho nút mũi tên khi mục có mục con */
#menu-mobile.mm-menu .mm-listview > li > .mm-next + a {
    padding-right: 52px;
}

#menu-mobile.mm-menu .mm-listview > li > a:not(.mm-next):hover,
#menu-mobile.mm-menu .mm-listview > li > a:not(.mm-next):active,
#menu-mobile.mm-menu .mm-listview > li.mm-selected > a:not(.mm-next) {
    background: var(--pmm-accent-soft);
    color: var(--pmm-accent);
}

/* Vạch nhấn bên trái mục đang chọn */
#menu-mobile.mm-menu .mm-listview > li.mm-selected > a:not(.mm-next):before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 4px;
    border-radius: 0 4px 4px 0;
    background: var(--pmm-accent);
}

/* Biểu tượng ▸ trước mục con (GetMenu.cshtml) */
#menu-mobile.mm-menu .mm-listview > li > a .fa-caret-right {
    margin-right: 8px;
    color: var(--pmm-accent);
}

/* ---- Nút mở mục con ---- */
#menu-mobile.mm-menu .mm-listview .mm-next {
    width: 48px;
    border-radius: 0 var(--pmm-radius) var(--pmm-radius) 0;
}

#menu-mobile.mm-menu .mm-listview .mm-next:before {
    top: 10px;
    bottom: 10px;
    border-color: var(--pmm-line);
}

#menu-mobile.mm-menu .mm-listview > li .mm-next:after {
    right: 20px;
    width: 9px;
    height: 9px;
    border-color: var(--pmm-arrow);
}

#menu-mobile.mm-menu .mm-listview > li .mm-next:active {
    background: var(--pmm-accent-soft);
}