/* ============================================================================
   KCThanhHoa MOBILE MENU V5 - 19/08/2026
   FIX: Mobile menu typography/alignment only.
   - Khóa chữ menu đa cấp về căn TRÁI; không còn cấp cha bị center.
   - Giữ icon bên trái, label co giãn, nút mở submenu cố định bên phải.
   - Font rõ, dễ đọc trên iOS/Android; không tác động menu desktop.
   - File này phải load SAU mobile-menu-v4.css để thắng CSS legacy.
   ============================================================================ */
@media (max-width: 860px) {
  /* Reset các thuộc tính căn giữa/font từ theme desktop/legacy. */
  #mainNavigation #primaryMenu,
  #mainNavigation #primaryMenu ul,
  #mainNavigation #primaryMenu li,
  #mainNavigation #primaryMenu a,
  #mainNavigation #primaryMenu .menu-node-link,
  #mainNavigation #primaryMenu .menu-link-inner,
  #mainNavigation #primaryMenu .menu-label {
    text-align: left !important;
  }

  #mainNavigation #primaryMenu .menu-node-link {
    justify-content: flex-start !important;
    align-items: center !important;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
  }

  /* Cấp CHA: rõ ràng, hiện đại, nhưng không quá to. */
  #mainNavigation #primaryMenu > .menu-root > li > .menu-node-link {
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    padding: 10px 11px !important;
    min-height: 46px !important;
  }

  #mainNavigation #primaryMenu .menu-link-inner {
    display: flex !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 9px !important;
    margin: 0 !important;
  }

  #mainNavigation #primaryMenu .menu-label {
    display: block !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    color: inherit !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
  }

  /* Icon luôn nằm bên trái, không làm label bị căn giữa. */
  #mainNavigation #primaryMenu .menu-icon-badge {
    flex: 0 0 29px !important;
    width: 29px !important;
    height: 29px !important;
    margin: 0 !important;
  }

  /* Nút mũi tên là cột riêng bên phải. */
  #mainNavigation #primaryMenu .menu-submenu-toggle {
    align-self: stretch !important;
    justify-self: end !important;
    min-height: 46px !important;
  }

  /* Cấp CON/CHÁU: nhỏ hơn cấp cha một chút, vẫn căn trái. */
  #mainNavigation #primaryMenu .menu-sub .menu-node-link {
    justify-content: flex-start !important;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    min-height: 42px !important;
    padding: 8px 10px !important;
  }

  #mainNavigation #primaryMenu .menu-sub .menu-icon-badge {
    flex-basis: 26px !important;
    width: 26px !important;
    height: 26px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
  }

  #mainNavigation #primaryMenu .menu-sub .menu-submenu-toggle {
    min-height: 42px !important;
  }

  /* Thụt cấp bằng khoảng cách của UL, không dùng text-align/justify center. */
  #mainNavigation #primaryMenu .menu-level-1 { padding-left: 10px !important; }
  #mainNavigation #primaryMenu .menu-level-2 { padding-left: 16px !important; }
  #mainNavigation #primaryMenu .menu-level-3,
  #mainNavigation #primaryMenu .menu-level-4,
  #mainNavigation #primaryMenu .menu-level-5,
  #mainNavigation #primaryMenu .menu-level-6 { padding-left: 20px !important; }

  /* Active/touch feedback tinh tế, không thay logic menu. */
  #mainNavigation #primaryMenu .menu-node-link:active {
    background: rgba(255,255,255,.08) !important;
  }
}